// invite.jsx — Regan & Yaneke engagement invite
const { useEffect, useRef, useState, useMemo } = React;

// ─── Palettes (brown, blue accent, cream) ─────────────────────────────
const PALETTES = [
  { id: "earth",    label: "Earth",    vals: ["#2A1C12", "#B9CFDA", "#F2EDE4"] },
  { id: "espresso", label: "Espresso", vals: ["#1B120A", "#9CBAC8", "#EAE2D2"] },
  { id: "fawn",     label: "Fawn",     vals: ["#594028", "#C9DCE4", "#F6F1E6"] },
  { id: "midnight", label: "Midnight", vals: ["#241A14", "#7FA0B0", "#ECE4D2"] },
];

function applyPalette(p) {
  const [brown, blue, cream] = p;
  const root = document.documentElement.style;
  root.setProperty("--brown", brown);
  root.setProperty("--blue", blue);
  root.setProperty("--cream", cream);
  root.setProperty("--brown-2", mix(brown, cream, 0.22));
  root.setProperty("--brown-3", mix(brown, cream, 0.5));
  root.setProperty("--blue-2",  mix(blue, brown, 0.18));
  root.setProperty("--blue-3",  mix(blue, cream, 0.55));
  root.setProperty("--cream-2", mix(cream, brown, 0.08));
  root.setProperty("--paper",   mix(cream, "#ffffff", 0.4));
}
function mix(a, b, t) {
  const pa = hexToRgb(a), pb = hexToRgb(b);
  const r = Math.round(pa.r + (pb.r - pa.r) * t);
  const g = Math.round(pa.g + (pb.g - pa.g) * t);
  const bl = Math.round(pa.b + (pb.b - pa.b) * t);
  return `rgb(${r},${g},${bl})`;
}
function hexToRgb(h) {
  if (h.startsWith("rgb")) {
    const m = h.match(/\d+/g).map(Number);
    return { r: m[0], g: m[1], b: m[2] };
  }
  const s = h.replace("#", "");
  return { r: parseInt(s.slice(0,2),16), g: parseInt(s.slice(2,4),16), b: parseInt(s.slice(4,6),16) };
}

// ─── Copy tone variants ────────────────────────────────────────────────
const COPY = {
  warm: {
    eyebrow: "Together with their families",
    invite:  "joyfully invite you to celebrate their engagement",
    blurb:   "An evening among the people we love — drinks, a long table, the city lights, and the start of what's next.",
    dateLabel: "The evening of",
    venueLabel:"You'll find us at",
    venueBlurb:"The Island Rooftop sits five floors above Cavill Avenue with the Pacific on one side and the lit-up skyline on the other. Drinks and canapés from six. At ten, the party rolls down to the rooftop bar for whoever's still keen.",
    stayLabel: "Where to stay",
    stayBlurb: "We've held a small block of rooms at QT Gold Coast, a few minutes' walk from the rooftop. Use the code R&Y2026 when you book.",
    rsvpHead:  "Will you join us?",
    rsvpLead:  "We'd love your reply by the first of August. The form takes a minute — let us know dietaries, plus-ones, and whether you'll need a lift home.",
    rsvpBtn:   "Reply to the invitation",
    footHead:  "See you on the rooftop.",
    footNote:  "With every kindness,\nR & Y",
  },
  formal: {
    eyebrow: "The honour of your presence is requested",
    invite:  "at the engagement of Regan and Yaneke",
    blurb:   "An evening of dinner and dancing in celebration of their forthcoming marriage. Black-tie optional.",
    dateLabel: "Saturday the twenty-second",
    venueLabel:"The Island Rooftop",
    venueBlurb:"Level Five, The Island Gold Coast, 3128 Surfers Paradise Boulevard. Cocktails and canapés from six o'clock. From ten, guests are warmly invited to continue at the rooftop bar.",
    stayLabel: "Accommodation",
    stayBlurb: "A courtesy room block has been arranged at QT Gold Coast. Quote reservation code R&Y2026 at the time of booking.",
    rsvpHead:  "Kindly reply",
    rsvpLead:  "Responses are requested no later than the first of August, two thousand and twenty-six. Please indicate any dietary requirements.",
    rsvpBtn:   "Respond",
    footHead:  "We look forward to your company.",
    footNote:  "With warmest regards,\nRegan & Yaneke",
  },
  playful: {
    eyebrow: "Two humans, one rooftop, no escape",
    invite:  "we're getting engaged. come help us celebrate.",
    blurb:   "Bring an appetite, comfortable shoes for dancing, and the friend you'd want next to you at a good party.",
    dateLabel: "Save this date",
    venueLabel:"Up on the roof",
    venueBlurb:"Five storeys up, with the ocean behind us and the city lit up like a pinball machine. Canapés and drinks from six. At ten the rooftop bar opens its doors — stay as long as you like.",
    stayLabel: "Crashpad",
    stayBlurb: "QT Gold Coast is the easy walk-home option — code R&Y2026 gets you a rate. Or pick anywhere in Surfers; the rooftop won't move.",
    rsvpHead:  "Coming?",
    rsvpLead:  "Tell us by 1 August. Yes, no, maybe, plus-one, allergies, dance-floor stamina — all of it.",
    rsvpBtn:   "Tell us yes",
    footHead:  "See you up there.",
    footNote:  "Big love,\nR & Y",
  }
};

// ─── Reveal hook ───────────────────────────────────────────────────────
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll("[data-reveal], [data-reveal-letter]");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.18, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

function Letters({ text, base = 0 }) {
  return (
    <span data-reveal-letter>
      {[...text].map((ch, i) => (
        <span className="lt" style={{ "--i": base + i }} key={i}>
          {ch === " " ? " " : ch}
        </span>
      ))}
    </span>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────
function Hero({ variant, copy }) {
  return (
    <section className="hero" data-variant={variant}>
      <div className="hero-inner">
        {variant === "stacked" && (
          <>
            <div className="hero-eyebrow" data-reveal>
              <span className="pad"></span>
              {copy.eyebrow}
              <span className="pad"></span>
            </div>
            <div className="names">
              <span className="word"><Letters text="Regan" /></span>
              <span className="amp"> &amp; </span>
              <span className="word"><Letters text="Yaneke" base={6} /></span>
            </div>
            <div className="hero-sub" data-reveal style={{ "--rd": "1200ms" }}>
              <span>22 · 08 · 2026</span>
              <span className="sep"></span>
              <span>Six til Ten</span>
              <span className="sep"></span>
              <span>The Island Rooftop</span>
              <span className="sep"></span>
              <span>Gold Coast</span>
            </div>
          </>
        )}

        {variant === "split" && (
          <>
            <div className="hero-eyebrow" data-reveal>{copy.eyebrow}</div>
            <div className="hero-l">
              <div className="names"><Letters text="Regan" /></div>
            </div>
            <div className="hero-r">
              <div className="names" style={{ fontSize: "clamp(56px,12vw,184px)", color: "var(--brown-3)" }}>
                <span>&amp;</span>
              </div>
              <div className="names"><Letters text="Yaneke" base={6} /></div>
            </div>
            <div className="hero-sub" data-reveal style={{ "--rd": "1200ms" }}>
              <span>22 · 08 · 2026</span>
              <span className="sep"></span>
              <span>The Island Rooftop, Gold Coast</span>
            </div>
          </>
        )}

        {variant === "asym" && (
          <>
            <div className="hero-eyebrow" data-reveal>{copy.eyebrow}</div>
            <div className="names" style={{ marginLeft: "2vw" }}>
              <Letters text="Regan" />
            </div>
            <div className="names row-y" style={{ marginTop: "-.06em" }}>
              <span className="amp" style={{ fontSize: ".8em" }}>&amp;</span>{" "}
              <Letters text="Yaneke" base={6} />
            </div>
            <div className="hero-sub" data-reveal style={{ "--rd": "1200ms" }}>
              <span>22 · 08 · 2026</span>
              <span className="sep"></span>
              <span>The Island Rooftop · Gold Coast</span>
            </div>
          </>
        )}

        <div className="serial">№ 001 / Invitation</div>
        <div className="serial serial-r">Edition of one</div>
      </div>
    </section>
  );
}

// ─── Detail block ──────────────────────────────────────────────────────
function Detail({ n, label, title, body, coord }) {
  return (
    <div className="detail" data-reveal>
      <div className="lab"><span className="n">{n}</span><span style={{opacity:.35}}>/</span><span>{label}</span></div>
      <h2>{title}</h2>
      <p>{body}</p>
      {coord && (
        <div style={{ marginTop: 24, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".22em", color: "var(--brown-3)", textTransform: "uppercase" }}>
          {coord}
        </div>
      )}
    </div>
  );
}

// ─── Schedule strip ────────────────────────────────────────────────────
function ScheduleStrip() {
  const items = [
    { k: "Arrival",      v: "6:00 pm" },
    { k: "Toast",        v: "6:45 pm" },
    { k: "Canapés", v: "All evening" },
    { k: "Rooftop bar",  v: "From 10 pm" },
  ];
  return (
    <div className="strip" data-reveal>
      {items.map((it, i) => (
        <div className="cell" key={i} style={{ "--rd": `${i * 120}ms` }} data-reveal>
          <div className="k">{it.k}</div>
          <div className="v">{it.v}</div>
        </div>
      ))}
    </div>
  );
}

// ─── App ───────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const copy = COPY[t.tone] || COPY.warm;

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useReveal();

  return (
    <>
      <Hero variant={t.hero} copy={copy} />

      {/* Event details panel — blue */}
      <section className="panel blue" style={{ background: "var(--blue)" }}>
        <div className="band" data-reveal>
          <div className="eyebrow">Chapter I · The Evening</div>
          <h3>{copy.invite}</h3>
          <div className="coord" style={{textAlign:"right",lineHeight:1.7,whiteSpace:"nowrap"}}>Latitude -41.29333<br/>Longitude 174.78113</div>
        </div>

        <div className="detail-grid">
          <Detail
            n="01"
            label={copy.dateLabel}
            title={<>Saturday<br/><em style={{fontStyle:"italic"}}>22 August 2026</em></>}
            body={<>Six in the evening until ten. Dress warm — winter on the coast still asks for a jacket after the sun goes down.</>}
            coord="22 · 08 · 2026 · AEST"
          />
          <Detail
            n="02"
            label={copy.venueLabel}
            title={<>The Island<br/><em style={{fontStyle:"italic"}}>Rooftop</em></>}
            body={copy.venueBlurb}
            coord="Surfers Paradise, QLD"
          />
        </div>

        <ScheduleStrip />
      </section>

      {/* Personal note — brown */}
      <section className="note">
        <div className="corner l" data-reveal>A note · please read</div>
        <div className="corner r" data-reveal>R &amp; Y</div>
        <div className="note-inner" data-reveal>
          <div className="eyebrow">
            <span className="pad"></span>
            An important note
            <span className="pad"></span>
          </div>
          <p>
            Since we aren't planning on a future wedding celebration, this occasion feels <span className="accent">especially important</span> to us — our chance to celebrate surrounded by the people who matter most. For our loved ones travelling from overseas, we sincerely hope you can join us for such a special night.
          </p>
        </div>
      </section>

      {/* Travel & stay panel — cream */}
      <section className="panel cream">
        <div className="band" data-reveal>
          <div className="eyebrow">Chapter II · Getting there</div>
          <h3><em style={{fontStyle:"italic"}}>Travel</em> &amp; stay</h3>
          <div className="coord">QLD · Australia</div>
        </div>

        <div className="detail-grid">
          <Detail
            n="03"
            label="Flying in"
            title={<>Gold Coast<br/><em style={{fontStyle:"italic"}}>Airport</em></>}
            body="OOL is a thirty-five minute drive south of Surfers. Brisbane (BNE) is the alternative — about sixty minutes up the M1 by car."
            coord="OOL · BNE"
          />
          <Detail
            n="04"
            label={copy.stayLabel}
            title={<>A short<br/><em style={{fontStyle:"italic"}}>walk away</em></>}
            body={copy.stayBlurb}
            coord="Cavill Ave · Esplanade"
          />
        </div>
      </section>

      {/* RSVP */}
      <section className="rsvp">
        <div data-reveal>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".32em", textTransform: "uppercase", color: "var(--brown-3)", marginBottom: 28 }}>
            <span style={{display:"inline-block",width:36,height:1,background:"currentColor",verticalAlign:"middle",marginRight:14,opacity:.5}}></span>
            Chapter III
            <span style={{display:"inline-block",width:36,height:1,background:"currentColor",verticalAlign:"middle",marginLeft:14,opacity:.5}}></span>
          </div>
          <h2><em style={{fontStyle:"italic"}}>{copy.rsvpHead}</em></h2>
          <p className="lead">{copy.rsvpLead}</p>
          <a className="btn" href="https://forms.gle/placeholder-rsvp" target="_blank" rel="noopener">
            {copy.rsvpBtn}
            <span className="arrow"></span>
          </a>
          <div className="rsvp-meta">
            <span>Reply by 01.08.2026</span>
            <span>·</span>
            <a href="mailto:info@reganyaneke.com">info@reganyaneke.com</a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer>
        <div className="foot-grid">
          <div data-reveal>
            <div className="lab">Closing</div>
            <p className="big" style={{ fontStyle: "italic" }}>{copy.footHead}</p>
          </div>
          <div data-reveal style={{ "--rd": "120ms" }}>
            <div className="lab">A note</div>
            <p style={{ whiteSpace: "pre-line" }}>{copy.footNote}</p>
          </div>
          <div data-reveal style={{ "--rd": "240ms" }}>
            <div className="lab">In short</div>
            <p>22 August 2026 · 6–10pm · The Island Rooftop · Surfers Paradise · RSVP by 01.08.</p>
          </div>
        </div>
        <div className="foot-bot">
          <span>R<span style={{display:"inline-block",width:"1.4em"}}></span>&amp;<span style={{display:"inline-block",width:"1.4em"}}></span>Y<span style={{display:"inline-block",width:"1.4em"}}></span>·<span style={{display:"inline-block",width:"1.4em"}}></span>MMXXVI</span>
          <span>Gold Coast, AU</span>
        </div>
      </footer>

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakColor
          label="Colour"
          value={t.palette}
          options={PALETTES.map(p => p.vals)}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakSection label="Hero layout" />
        <TweakRadio
          label="Variant"
          value={t.hero}
          options={["stacked", "split", "asym"]}
          onChange={(v) => setTweak("hero", v)}
        />
        <TweakSection label="Copy tone" />
        <TweakRadio
          label="Voice"
          value={t.tone}
          options={["warm", "formal", "playful"]}
          onChange={(v) => setTweak("tone", v)}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);