/* global React, ReactDOM */
// Derin & Miguel — Wedding website app

const { useState, useEffect, useMemo } = React;

// ── Content (English + Portuguese) ───────────────────────────────────
const COPY = {
  en: {
    nav: { schedule: "The Day", venue: "Venue", travel: "Travel", dress: "Dress", rsvp: "RSVP", faq: "Q&A" },
    hero: {
      eyebrow: "Together with their families",
      tag: "we invite you to celebrate our wedding",
      meta: ["Saturday", "26 . 09 . 2026", "16h00"],
      venue: "Herdade do Perú · Brejos de Azeitão, Portugal",
    },
    countdown: { d: "Days", h: "Hours", m: "Minutes", s: "Seconds" },
    story: {
      eyebrow: "How it all began",
      title: "Our Story",
      sub: "A small recollection of how two paths crossed and never quite parted.",
      lede: "It started in Lisbon, over a long lunch that turned into a longer evening, and then into a decade we never planned but couldn't have written better.",
      body: [
        "Derin had moved to Portugal for work; Miguel had grown up half an hour from the sea. A mutual friend insisted they meet. They did, and they didn't stop talking — about books, about home, about the slow way light moves over the Alentejo.",
        "Ten years, three apartments, two cities and one very patient cat later, we are gathering everyone we love at the place that has come to feel like home — Herdade do Perú — to make it official.",
      ],
    },
    schedule: {
      eyebrow: "26 September 2026",
      title: "The Day",
      sub: "A loose itinerary so you know roughly where to be.",
      rows: [
        { time: "16:00", name: "Welcome",    desc: "Arrival at Herdade do Perú. Cold drinks, easy conversation.",                          icon: "star" },
        { time: "16:15", name: "Ceremony",   desc: "Outdoor ceremony under the tree. Bring a hat or a tear or two.",                       icon: "plus" },
        { time: "17:00", name: "Cocktail",   desc: "Petiscos, mezes, wine, and the golden hour. The most photogenic part of the day.",   icon: "glass" },
        { time: "19:00", name: "Dinner",     desc: "A long, slow Portuguese dinner.",                                                       icon: "cup" },
        { time: "22:00", name: "Dancing",    desc: "Open dance floor. Comfortable shoes recommended.",                                     icon: "music" },
        { time: "01:00", name: "Late Bites", desc: "Soup, prego, and a second wind. The night is still young.",                            icon: "moon" },
      ],
    },
    venue: {
      eyebrow: "The Place",
      title: "Where we'll be",
      name: "Herdade do Perú",
      loc: "Brejos de Azeitão · 40 min from Lisbon",
      desc: "A whitewashed 18th-century estate tucked between cork oaks and vineyards on the Setúbal peninsula. The ceremony will be outdoors on the lawn — flat shoes recommended.",
      cta: "Open in maps",
      fromLisbon: "From Lisbon",
      fromComporta: "From Comporta",
    },
    travel: {
      eyebrow: "Getting here",
      title: "Travel & Stay",
      sub: "Lisbon airport (LIS) is the closest major hub; the venue is a 30-minute drive south.",
      cards: [
        { tag: "Flights", title: "Fly into Lisbon (LIS)", body: "Direct flights from most European cities and many North American hubs. Aim to arrive by Friday lunchtime.", meta: "≈ 30 min by car to venue" },
        { tag: "Hotel block", title: "Pousada de Palmela", body: "We've reserved a block of rooms with a preferential rate. Book before 30 June 2026 — quote DERIN-MIGUEL.", meta: "Shuttles included" },
        { tag: "Around town", title: "Setúbal & Azeitão", body: "Lots of small guesthouses and farm-stays nearby if you want to make a longer holiday of it.", meta: "We'll share favourites" },
      ],
    },
    dress: {
      eyebrow: "What to wear",
      title: "Garden Formal",
      sub: "Linen, long skirts, light suits — think a summer wedding in Portugal at the very end of summer. Soft, earthy tones welcome; brides please leave the white at home.",
      labels: ["Sage", "Cream", "Blush", "Terracotta", "Olive"],
    },
    rsvp: {
      eyebrow: "Kindly reply by 31 May",
      title: "RSVP",
      sub: "One form per guest, please. If you're bringing a plus-one or little ones, you can add them below.",
      labels: {
        name: "Your full name", email: "Email", attending: "Will you join us?",
        yes: "Joyfully accept", no: "Regretfully decline",
        plusone: "Plus-one or children", plusonePh: "Names, if any",
        diet: "Dietary needs", dietPh: "Allergies, preferences…",
        song: "A song that will get you dancing", songPh: "Optional but appreciated",
        submit: "Send reply",
        sending: "Sending…",
      },
      success: {
        ay: "Beautiful.", msg: "Your reply is on its way to us.",
        small: "We'll send full details closer to the date.",
      },
    },
    faq: {
      eyebrow: "The fine print",
      title: "Questions",
      items: [
        { q: "Can I bring a plus-one?", a: "If your invitation includes one, yes — add their name on the RSVP. Otherwise it's an intimate group and we'd love to keep it just you." },
        { q: "Are children welcome?", a: "Of course — we'll have a quiet area set up. Let us know ages in the RSVP so we can plan." },
        { q: "What's the weather like in late September?", a: "Warm days (around 24°C), cool evenings. A light wrap or jacket for after sunset is a good idea." },
        { q: "Is there parking at the venue?", a: "Yes, plenty. We'd also strongly encourage the shuttle — it runs from Lisbon and Setúbal." },
        { q: "Should we get you a gift?", a: "Your presence is the gift. If you really insist, we've put together a small honeymoon fund — link to follow." },
        { q: "What time does the party end?", a: "Shuttles depart at 02h00. The hardcore among you are welcome to keep going at the after-after." },
      ],
    },
    footer: { love: "with all our love", date: "26 . 09 . 2026 — HERDADE DO PERÚ" },
  },
  pt: {
    nav: { schedule: "O Dia", venue: "Local", travel: "Viagem", dress: "Traje", rsvp: "Resposta", faq: "Dúvidas" },
    hero: {
      eyebrow: "Juntamente com as suas famílias",
      tag: "convidamo-lo para celebrar o nosso casamento",
      meta: ["Sábado", "26 . 09 . 2026", "16h00"],
      venue: "Herdade do Perú · Brejos de Azeitão, Portugal",
    },
    countdown: { d: "Dias", h: "Horas", m: "Minutos", s: "Segundos" },
    story: {
      eyebrow: "Como tudo começou",
      title: "A Nossa História",
      sub: "Uma pequena recordação de como dois caminhos se cruzaram e nunca mais se separaram.",
      lede: "Começou em Lisboa, num almoço demorado que se tornou um jantar mais demorado, e depois numa década que não planeámos mas que não podíamos ter escrito melhor.",
      body: [
        "A Derin tinha-se mudado para Portugal a trabalho; o Miguel cresceu a meia hora do mar. Um amigo comum insistiu para que se conhecessem. Conheceram-se, e não pararam mais de falar.",
        "Dez anos, três apartamentos, duas cidades e uma gata muito paciente depois, vamos reunir todos os que amamos no sítio que se tornou casa — a Herdade do Perú — para tornar tudo oficial.",
      ],
    },
    schedule: {
      eyebrow: "26 de Setembro 2026",
      title: "O Dia",
      sub: "Um roteiro solto, para saberem mais ou menos onde estar.",
      rows: [
        { time: "16:00", name: "Chegada",    desc: "Chegada à Herdade do Perú. Bebidas frescas e boa conversa.",                            icon: "star" },
        { time: "16:15", name: "Cerimónia",  desc: "Cerimónia ao ar livre, sob a árvore. Tragam chapéu ou uma lágrima ou duas.",            icon: "plus" },
        { time: "17:00", name: "Cocktail",   desc: "Petiscos, mezes, vinho e a hora dourada. A parte mais fotogénica do dia.",             icon: "glass" },
        { time: "19:00", name: "Jantar",     desc: "Um jantar português longo e sem pressas.",                                              icon: "cup" },
        { time: "22:00", name: "Dança",      desc: "Pista aberta. Recomenda-se calçado confortável.",                                       icon: "music" },
        { time: "01:00", name: "Late Bites", desc: "Caldo, prego e um segundo fôlego. A noite ainda é nova.",                               icon: "moon" },
      ],
    },
    venue: {
      eyebrow: "O Local",
      title: "Onde será",
      name: "Herdade do Perú",
      loc: "Brejos de Azeitão · a 40 min de Lisboa",
      desc: "Uma quinta caiada do séc. XVIII entre sobreiros e vinhas, na península de Setúbal. A cerimónia será ao ar livre, no relvado — sapatos rasos são uma boa ideia.",
      cta: "Abrir no mapa",
      fromLisbon: "De Lisboa",
      fromComporta: "Da Comporta",
    },
    travel: {
      eyebrow: "Como chegar",
      title: "Viagem & Estadia",
      sub: "O aeroporto de Lisboa (LIS) é a porta de entrada; a quinta fica a 30 min a sul.",
      cards: [
        { tag: "Voos", title: "Voar para Lisboa (LIS)", body: "Voos directos da maioria das capitais europeias. Tentem chegar até sexta à hora de almoço.", meta: "≈ 30 min de carro" },
        { tag: "Reservas", title: "Pousada de Palmela", body: "Reservámos um bloco de quartos com tarifa especial. Reservar antes de 30 Junho 2026 — código DERIN-MIGUEL.", meta: "Transferes incluídos" },
        { tag: "Em redor", title: "Setúbal & Azeitão", body: "Muitas casas de campo e pequenas estalagens, se quiserem ficar mais tempo.", meta: "Partilhamos sugestões" },
      ],
    },
    dress: {
      eyebrow: "Dress code",
      title: "Garden Formal",
      sub: "Linho, vestidos compridos, fatos leves — um casamento de verão em Portugal, mesmo no final do verão. Tons suaves e terrosos bem-vindos; deixem o branco em casa.",
      labels: ["Salva", "Creme", "Rosa", "Terracota", "Azeitona"],
    },
    rsvp: {
      eyebrow: "Confirmem até 31 de Maio",
      title: "Resposta",
      sub: "Um formulário por convidado, por favor. Se trouxerem acompanhante ou crianças, podem indicar abaixo.",
      labels: {
        name: "Nome completo", email: "Email", attending: "Vão estar connosco?",
        yes: "Com muita alegria", no: "Infelizmente não",
        plusone: "Acompanhante ou crianças", plusonePh: "Nomes, se houver",
        diet: "Restrições alimentares", dietPh: "Alergias, preferências…",
        song: "Uma música para nos pôr a dançar", songPh: "Opcional mas bem-vindo",
        submit: "Enviar resposta",
        sending: "A enviar…",
      },
      success: {
        ay: "Maravilhoso.", msg: "A vossa resposta está a caminho.",
        small: "Enviaremos mais detalhes mais perto da data.",
      },
    },
    faq: {
      eyebrow: "Detalhes",
      title: "Dúvidas",
      items: [
        { q: "Posso levar acompanhante?", a: "Se o vosso convite inclui +1, sim — indiquem o nome no formulário. Caso contrário, é um grupo íntimo e queremos só vocês." },
        { q: "Crianças são bem-vindas?", a: "Claro — teremos uma zona calma para os mais pequenos. Indiquem as idades no RSVP." },
        { q: "Como é o tempo em fim de Setembro?", a: "Dias amenos (≈24°C), noites frescas. Um xaile ou casaco leve para depois do pôr-do-sol é boa ideia." },
        { q: "Há estacionamento?", a: "Sim, bastante. Recomendamos vivamente o transfer — sai de Lisboa e Setúbal." },
        { q: "Que prenda vos podemos oferecer?", a: "A vossa presença é a prenda. Se insistirem, há um pequeno fundo de lua-de-mel — link em breve." },
        { q: "A que horas acaba a festa?", a: "Os transferes saem às 02h00. Quem quiser ficar, há um after-after." },
      ],
    },
    footer: { love: "com todo o nosso amor", date: "26 . 09 . 2026 — HERDADE DO PERÚ" },
  },
};

const WEDDING_DATE = new Date("2026-09-26T16:00:00+01:00");

// ── Watercolor backdrop (real extracted artifacts from the invitation) ──
function HeroWatercolor() {
  return (
    <>
      <img className="wc wc-tree-left"  src="assets/tree-left.png"  alt="" aria-hidden="true" />
      <img className="wc wc-tree-right" src="assets/tree-right.png" alt="" aria-hidden="true" />
      <img className="wc wc-flowers-l"  src="assets/flowers-left.png"  alt="" aria-hidden="true" />
      <img className="wc wc-flowers-r"  src="assets/flowers-right.png" alt="" aria-hidden="true" />
    </>
  );
}

// Decorative tree pinned to a section corner
function SectionTree({ side = "left", top = 40, size = 200, opacity = 0.45 }) {
  const src = side === "left" ? "assets/tree-left.png" : "assets/tree-right.png";
  const style = {
    position: "absolute",
    top: top,
    width: size,
    opacity,
    pointerEvents: "none",
    zIndex: 0,
    [side]: -size * 0.18,
  };
  return <img src={src} alt="" aria-hidden="true" style={style} />;
}

// Decorative flower strip pinned to a section bottom
function SectionFlowers({ side = "left", bottom = 0, width = 360, opacity = 0.5 }) {
  const src = side === "left" ? "assets/flowers-left.png" : "assets/flowers-right.png";
  const style = {
    position: "absolute",
    bottom,
    width,
    opacity,
    pointerEvents: "none",
    zIndex: 0,
    [side]: 0,
  };
  return <img src={src} alt="" aria-hidden="true" style={style} />;
}

// Small sage leaf flourish, used as section divider
function LeafFlourish({ size = 22 }) {
  return (
    <svg width={size * 4} height={size} viewBox="0 0 120 24" aria-hidden="true" style={{ color: "var(--sage)" }}>
      <path d="M0 12 L48 12" stroke="currentColor" strokeWidth="1" />
      <path d="M72 12 L120 12" stroke="currentColor" strokeWidth="1" />
      <path d="M60 4 C 56 8, 56 16, 60 20 C 64 16, 64 8, 60 4 Z" fill="currentColor" opacity="0.85" />
      <circle cx="60" cy="12" r="1.2" fill="currentColor" />
    </svg>
  );
}

// Line-art icons for the schedule cards — sage stroke, terracotta accents
function ScheduleIcon({ kind, size = 52 }) {
  const stroke = "var(--sage-deep, #4a5a3e)";
  const accent = "var(--terracotta, #c97f55)";
  const common = { width: size, height: size, viewBox: "0 0 64 64", fill: "none",
                   stroke, strokeWidth: 1.2, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "star":
      // four-point sparkle — welcome arrival
      return (
        <svg {...common}>
          <path d="M32 8 C 32 22, 34 30, 50 32 C 34 34, 32 42, 32 56 C 32 42, 30 34, 14 32 C 30 30, 32 22, 32 8 Z" />
          <circle cx="50" cy="14" r="1.6" fill={accent} stroke="none" />
          <circle cx="14" cy="50" r="1.2" fill={accent} stroke="none" />
        </svg>
      );
    case "plus":
      // overlapping wedding rings — ceremony
      return (
        <svg {...common}>
          <circle cx="24" cy="32" r="13" />
          <circle cx="40" cy="32" r="13" stroke={accent} />
        </svg>
      );
    case "glass":
      // coupe / champagne glass — cocktail
      return (
        <svg {...common}>
          <path d="M16 14 C 18 26, 24 34, 32 34 C 40 34, 46 26, 48 14 Z" />
          <path d="M32 34 L32 52" />
          <path d="M24 52 L40 52" />
          <circle cx="38" cy="20" r="1.6" fill={accent} stroke="none" />
        </svg>
      );
    case "cup":
      // plate / charger — dinner
      return (
        <svg {...common}>
          <ellipse cx="32" cy="38" rx="22" ry="6" />
          <ellipse cx="32" cy="36" rx="15" ry="3.5" />
          <path d="M28 26 C 28 22, 36 22, 36 26" stroke={accent} />
        </svg>
      );
    case "music":
      // single elegant note — dancing
      return (
        <svg {...common}>
          <path d="M26 46 L26 16 L44 12 L44 38" />
          <ellipse cx="22" cy="46" rx="6" ry="5" fill={stroke} stroke="none" />
          <ellipse cx="40" cy="38" rx="6" ry="5" fill={stroke} stroke="none" />
          <circle cx="52" cy="14" r="1.4" fill={accent} stroke="none" />
        </svg>
      );
    case "moon":
      // crescent + stars — late bites
      return (
        <svg {...common}>
          <path d="M42 14 C 30 14, 22 24, 22 36 C 22 46, 30 54, 42 54 C 34 50, 28 42, 28 34 C 28 26, 34 18, 42 14 Z" />
          <circle cx="50" cy="22" r="1.6" fill={accent} stroke="none" />
          <circle cx="52" cy="42" r="1.2" fill={accent} stroke="none" />
          <circle cx="46" cy="50" r="1" fill={accent} stroke="none" />
        </svg>
      );
    default:
      return null;
  }
}

window.ScheduleIcon = ScheduleIcon;

window.HeroWatercolor = HeroWatercolor;
window.SectionTree = SectionTree;
window.SectionFlowers = SectionFlowers;
window.LeafFlourish = LeafFlourish;
window.COPY = COPY;
window.WEDDING_DATE = WEDDING_DATE;