// 'Ala Lei — Modern Heritage
// Single-page editorial site. Tweaks expose palette + collection focus.

const { useState, useEffect, useRef } = React;

const TWEAKS = /*EDITMODE-BEGIN*/{
  "palette": "cream",
  "showSecondary": true
} /*EDITMODE-END*/;

const PALETTES = {
  cream: { bg: '#F6EFE0', ink: '#1C1A15', muted: '#7A6F5C', rule: '#1C1A1522', accent: '#9C6B3F', paper: '#FBF6EA' },
  bone: { bg: '#EFEAE1', ink: '#23211C', muted: '#766F60', rule: '#23211C22', accent: '#3F5A4C', paper: '#F6F2E9' },
  dusk: { bg: '#1F1C16', ink: '#F6EFE0', muted: '#B6AB94', rule: '#F6EFE033', accent: '#D9A06B', paper: '#272219' }
};

// ----- Sections ---------------------------------------------------------

function Nav({ p }) {
  const [hidden, setHidden] = useState(false);
  const last = useRef(0);
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setHidden(y > 120 && y > last.current);
      last.current = y;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav " + (hidden ? "nav--hidden" : "")} style={{ '--bg': p.bg, '--ink': p.ink, '--rule': p.rule }}>
      <a href="#top" className="nav-mark">
        <span className="script">'Ala Lei</span>
      </a>
      <div className="nav-links">
        <a href="#story">Story</a>
        <a href="#craft">Craft</a>
        <a href="#contact">Contact</a>
      </div>
    </nav>);

}

function Hero({ p }) {
  return (
    <header id="top" className="hero" style={{ ...{ background: p.bg, color: p.ink }, background: "rgb(255, 255, 255)" }}>
      <div className="hero-eyebrow">
        <span>Established by hand</span>
      </div>
      <div className="hero-mark-wrap">
        <h1 className="hero-mark script">&rsquo;Ala Lei</h1>
      </div>
      <p className="hero-tag script-small">Modern Heritage</p>
      <p className="hero-lede">Bespoke, local leis, garlands, and wearable florals - with a foundation built on the way we made them at home, re-imagined for today. 


      </p>
      <a href="#story" className="hero-cue" aria-label="Begin">
        <span>begin</span>
        <svg viewBox="0 0 24 40" width="14" height="24" aria-hidden="true">
          <path d="M12 2 V36 M5 29 L12 36 L19 29" stroke="currentColor" strokeWidth="1.2" fill="none" strokeLinecap="round" />
        </svg>
      </a>
    </header>);

}

function Story({ p }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setSeen(true), { threshold: 0.25 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <section id="story" ref={ref} className={"story " + (seen ? "is-in" : "")} style={{ ...{ background: p.paper, color: p.ink }, background: "rgb(255, 255, 255)" }}>
      <div className="story-grid">
        <figure className="story-photo">
          <div className="photo-frame">
            <img src="assets/heritage-portrait-upright.png" alt="A young woman in a pale dress, mid-century" />
            <figcaption>Leina'ala, c. 1962</figcaption>
          </div>
        </figure>
        <div className="story-copy">
          <div className="sec-label">Chapter One</div>
          <h2 className="sec-h">It's in the name.</h2>
          <p>
            <span className="dropcap">'A</span>la Lei means <em>the fragrant garland</em>, a name that evokes a heritage of authentic connection and care. These living crafts are rooted in the tradition of slow hands, fresh flowers, and perfectly tied ribbons.
          </p>
          <p>This is how we translate time-honored practices into creations that beautifully fit the modern lives we lead.</p>
          <p className="story-tagline">Rooted in heritage. Worn with love.</p>
          <div className="story-meta">
            <div><span className="k">Founded</span><span className="v">2024</span></div>
            <div><span className="k">By</span><span className="v">Kelly Leinaala</span></div>
            <div><span className="k">Made in</span><span className="v">San Diego, CA</span></div>
          </div>
        </div>
      </div>
    </section>);

}

function Craft({ p }) {
  const [active, setActive] = useState(0);
  const mk = (i) => ({
    className: "craft-card " + (active === i ? "is-active" : ""),
    onMouseEnter: () => setActive(i),
    onFocus: () => setActive(i),
    onClick: () => setActive(i)
  });
  return (
    <section id="craft" className="craft" style={{ background: p.bg, color: p.ink }}>
      <div className="sec-head">
        <div className="sec-label">Chapter Two</div>
        <h2 className="sec-h">The Studio<br />by appointment.</h2>
        <p className="sec-blurb">Bespoke design, just for you. Email two weeks ahead for fresh work; pickup in North Park, delivery available across San Diego, or shipped overnight on ice.</p>
      </div>

      <div className="craft-grid">
        <button {...mk(0)} style={{ '--tone': '#F4E89A' }}>
          <div className="craft-img" aria-hidden="true">
            <img src="assets/bobucha.jpeg" alt="Bombucha" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div className="craft-meta">
            <span className="craft-title script-small">Bombucha</span>
            <span className="craft-sub">A true show-stopper</span>
            <span className="craft-price">FROM $145</span>
          </div>
        </button>

        <button {...mk(1)} style={{ '--tone': '#A05080' }}>
          <div className="craft-img" aria-hidden="true">
            <img src="assets/double-carnation.jpeg" alt="Double Carnation" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div className="craft-meta">
            <span className="craft-title script-small">Double Carnation</span>
            <span className="craft-sub">Classic luxury</span>
            <span className="craft-price">FROM $90</span>
          </div>
        </button>

        <button {...mk(2)} style={{ '--tone': '#D87A3A' }}>
          <div className="craft-img" aria-hidden="true">
            <img src="assets/rose.jpeg" alt="Rose" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div className="craft-meta">
            <span className="craft-title script-small">Rose</span>
            <span className="craft-sub">Royal Aloha vibes </span>
            <span className="craft-price">FROM $100</span>
          </div>
        </button>

        <button {...mk(3)} style={{ '--tone': '#EFE6D2' }}>
          <div className="craft-img" aria-hidden="true">
            <img src="assets/silk.jpeg" alt="Silk" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div className="craft-meta">
            <span className="craft-title script-small">Silk</span>
            <span className="craft-sub">Timeless Keepsake</span>
            <span className="craft-price">FROM $75</span>
          </div>
        </button>
      </div>

      <div className="craft-footnote">
        <span className="rule" /> Custom florals for weddings, showers, holidays, memorials, and graduations - write me to create your unique vision.
      </div>
    </section>);

}

function Contact({ p }) {
  return (
    <section id="contact" className="contact" style={{ background: p.bg, color: p.ink }}>
      <div className="contact-grid contact-grid--single">
        <div className="contact-copy">
          <div className="sec-label">CHAPTER THREE</div>
          <h2 className="sec-h">Write to me.</h2>
          <p>Let's create your ideal lei, together. Leave a note and I'll write back within a day.</p>
          <dl className="contact-meta">
            <div><dt>Kelly Leinaala</dt><dd>Founder, hands</dd></div>
            <div><dt>By phone</dt><dd><a href="tel:+16198713397">619 · 871 · 3397</a></dd></div>
            <div><dt>BY EMAIL</dt><dd>kelly.leinaala@gmail.com</dd></div>
            <div><dt>By appointment</dt><dd>Contact Me</dd></div>
          </dl>
        </div>
      </div>
    </section>);

}

function Footer({ p }) {
  return (
    <footer className="foot" style={{ background: p.bg, color: p.ink, borderColor: p.rule }}>
      <div className="foot-mark script">'Ala Lei</div>
      <div className="foot-row">
        <span>© 2026 Kelly Leinaala</span>
        <span className="script-small">— Modern Heritage —</span>
        <span>619 · 871 · 3397</span>
      </div>
    </footer>);

}

// ----- App --------------------------------------------------------------

function App() {
  const [t, setTweak] = (window.useTweaks || ((d) => [d, () => {}]))(TWEAKS);
  Object.assign(TWEAKS, t);
  const p = PALETTES[t.palette] || PALETTES.cream;

  return (
    <div className="root" style={{
      '--bg': p.bg, '--ink': p.ink, '--muted': p.muted, '--rule': p.rule,
      '--accent': p.accent, '--paper': p.paper,
      background: p.bg, color: p.ink
    }}>
      <Nav p={p} />
      <Hero p={p} />
      <Story p={p} />
      <Craft p={p} />
      <Contact p={p} />
      <Footer p={p} />

      {window.TweaksPanel &&
      <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Palette">
            <window.TweakRadio
            label="Mood"
            value={t.palette}
            onChange={(v) => setTweak('palette', v)}
            options={[
            { value: 'cream', label: 'Cream' },
            { value: 'bone', label: 'Bone' },
            { value: 'dusk', label: 'Dusk' }]
            } />
          
          </window.TweakSection>
        </window.TweaksPanel>
      }
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);