/* 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", lisbon: "Lisbon", rsvp: "RSVP", faq: "Q&A" },
    hero: {
      eyebrow: "Together with their families",
      tag: "invite you to their 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ú.",                                                         icon: "star" },
        { time: "16:15", name: "Ceremony",   desc: "Outdoor ceremony under the tree. Feel free to bring a hat.",                          icon: "plus" },
        { time: "17:00", name: "Cocktail",   desc: "Petiscos, mezes, and wine. The most photogenic part of the day.",                     icon: "glass" },
        { time: "19:00", name: "Meal",       desc: "A Portuguese meal with a Turkish twist.",                                              icon: "cup" },
        { time: "22:00", name: "Dancing",    desc: "Open dance floor.",                                                                     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.",
      cta: "Open in maps",
      fromLisbon: "From Lisbon",
      fromComporta: "From Comporta",
      fromLisbonTime: "40 min by car",
      fromComportaTime: "1h 20 by car",
    },
    lisbon: {
      eyebrow: "Where to stay",
      title: "About Lisbon",
      intro: [
        "Lisbon, the capital of Portugal, is one of Europe's most charming cities, known for its rich history, colorful streets, stunning viewpoints, and warm atmosphere. Located along the Atlantic coast, the city offers a unique blend of tradition and modernity, with its iconic trams, lively squares, excellent cuisine, and welcoming people.",
        "One important thing to know about Lisbon is that it is built on seven hills. As a result, some neighborhoods feature steep streets, stairways, and uneven cobblestone paths. We recommend keeping this in mind when choosing your accommodation.",
      ],
      areasTitle: "Recommended Areas to Stay",
      areas: [
        { name: "Baixa & Rossio", desc: "Located in the heart of the city, these areas offer relatively flat streets, excellent transportation links, and easy access to Lisbon's main attractions." },
        { name: "Chiado", desc: "One of Lisbon's most elegant and vibrant neighborhoods, filled with cafés, restaurants, shops, and historic charm. Many attractions can be reached on foot." },
        { name: "Avenida da Liberdade", desc: "A beautiful tree-lined boulevard with excellent hotels, spacious sidewalks, and easy walking access to the city center. Ideal for guests seeking comfort and convenience." },
        { name: "Príncipe Real", desc: "A stylish neighborhood known for its boutique shops, gardens, and excellent restaurants. Some streets are hilly but generally manageable." },
        { name: "Hilly Areas", desc: "Alfama and Bairro Alto are among Lisbon's most authentic and picturesque neighborhoods. However, they are also the city's hilliest areas, with steep slopes, stairways, and cobblestone streets. They offer a wonderful local experience but may be less convenient for guests with mobility concerns." },
      ],
      closing: "For guests who prefer easier walking and a more central location, we recommend staying in Baixa, Rossio, Chiado, or Avenida da Liberdade. We look forward to celebrating with you in Portugal!",
    },
    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" },
      ],
    },
    rsvp: {
      eyebrow: "Kindly reply by 30 June",
      title: "RSVP",
      sub: "One form per guest, please — by 30 June 2026.",
      labels: {
        firstName: "First name", lastName: "Surname",
        email: "Email", attending: "Will you join us?",
        yes: "Joyfully accept", no: "Regretfully decline",
        diet: "Dietary needs", dietPh: "Allergies, preferences…",
        paperInvite: "Would you like a paper invitation?",
        paperYes: "Yes, please", paperNo: "No, thank you",
        addressLabel: "Postal address",
        addressLine1: "Street and number", addressLine1Ph: "e.g. Rua das Flores, 12",
        addressCity: "City", addressCityPh: "City",
        addressPostcode: "Postcode", addressPostcodePh: "Postcode",
        addressCountry: "Country", addressCountryPh: "Country",
        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.",
        againText: "Filling the form for another person too? Click below.",
        againBtn: "Fill the form again",
      },
    },
    faq: {
      eyebrow: "The fine print",
      title: "Questions",
      items: [
        { q: "Can I bring a plus-one?", a: "If your invitation includes one, the name will already be on it. Otherwise it's a small, intimate group and we'd love to keep it just you." },
        { q: "Are children welcome?", a: "We adore your little ones. To keep the evening relaxed for everyone — parents very much included — we're keeping the day adults-only, unless your child's name is on the invitation. Please reach out if that makes things tricky." },
        { 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." },
        { q: "What should I wear?", a: "Gentlemen: any suit or formal attire. For everyone: lean into colour — bright, joyful, formal. As a soft note, we'd kindly ask the ladies to please try not to wear black." },
        { q: "What time does the party end?", a: "Shuttles depart at 02h00." },
      ],
    },
    footer: { love: "with all our love", date: "26 . 09 . 2026 — HERDADE DO PERÚ" },
  },
  tr: {
    nav: { schedule: "Düğün Günü", venue: "Mekân", lisbon: "Lizbon", rsvp: "Katılım", faq: "Sorular" },
    hero: {
      eyebrow: "Aileleri ile birlikte",
      tag: "Bu özel günümüzde sizleri de yanımızda görmekten mutluluk duyarız",
      meta: ["Cumartesi", "26 . 09 . 2026", "16:00"],
      venue: "Herdade do Perú · Brejos de Azeitão, Portekiz",
    },
    countdown: { d: "Gün", h: "Saat", m: "Dakika", s: "Saniye" },
    story: {
      eyebrow: "Her şey nasıl başladı",
      title: "Hikâyemiz",
      sub: "İki yolun nasıl kesiştiğine ve bir daha hiç ayrılmadığına dair küçük bir hatıra.",
      lede: "Lizbon'da, uzun bir öğle yemeğinin daha uzun bir akşama, ardından planlamadığımız ama daha iyisini yazamayacağımız on yıla dönüşmesiyle başladı.",
      body: [
        "Derin işi için Portekiz'e taşınmıştı; Miguel ise denizden yarım saat uzakta büyümüştü. Ortak bir arkadaş tanışmaları için ısrar etti. Tanıştılar ve hiç susmadılar — kitaplardan, evden, Alentejo üzerinde ağır ağır kayan ışıktan.",
        "On yıl, üç apartman, iki şehir ve çok sabırlı bir kedinin ardından, evimiz olmuş bu yerde — Herdade do Perú'da — sevdiğimiz herkesi bir araya getiriyoruz; her şeyi resmî kılmak için.",
      ],
    },
    schedule: {
      eyebrow: "26 Eylül 2026",
      title: "Düğün Günü Programı",
      sub: "",
      rows: [
        { time: "16:00", name: "Karşılama",      desc: "Herdade do Perú'da buluşuyoruz.",                                                     icon: "star" },
        { time: "16:15", name: "Tören",          desc: "Ağacın altında açık havada tören. Dilerseniz şapka getirebilirsiniz.",               icon: "plus" },
        { time: "17:00", name: "Kokteyl",        desc: "Petiscos, meze ve şarap. Günün en fotojenik anı.",                                    icon: "glass" },
        { time: "19:00", name: "Yemek",          desc: "Türk dokunuşlu bir Portekiz yemeği.",                                                  icon: "cup" },
        { time: "22:00", name: "Dans",            desc: "Pist açık.",                                                                            icon: "music" },
        { time: "01:00", name: "Gece Atıştırması", desc: "Çorba, prego ve ikinci bir nefes. Gece daha yeni başlıyor.",                         icon: "moon" },
      ],
    },
    venue: {
      eyebrow: "Mekân",
      title: "Nerede olacağız",
      name: "Herdade do Perú",
      loc: "Brejos de Azeitão · Lizbon'a 40 dk",
      desc: "Setúbal yarımadasında, mantar meşeleri ve bağların arasında, 18. yüzyıldan kalma beyaz badanalı bir çiftlik. Tören çimde, açık havada gerçekleşecek.",
      cta: "Haritada aç",
      fromLisbon: "Lizbon'dan",
      fromComporta: "Comporta'dan",
      fromLisbonTime: "Arabayla 40 dk",
      fromComportaTime: "Arabayla 1 sa 20 dk",
    },
    lisbon: {
      eyebrow: "Konaklama",
      title: "Lizbon Hakkında",
      intro: [
        "Portekiz'in başkenti Lizbon, tarihi dokusu, renkli sokakları, eşsiz manzaraları ve sıcak atmosferiyle Avrupa'nın en büyüleyici şehirlerinden biridir. Atlantik Okyanusu'nun kıyısında yer alan şehir, tarihi tramvayları, canlı meydanları, lezzetli mutfağı ve misafirperver insanlarıyla ziyaretçilerine unutulmaz bir deneyim sunar.",
        "Lizbon'un önemli bir özelliği, yedi tepe üzerine kurulmuş olmasıdır. Bu nedenle bazı bölgelerinde oldukça dik yokuşlar ve merdivenli sokaklar bulunmaktadır. Konaklama seçerken bu durumu göz önünde bulundurmanızı tavsiye ederiz.",
      ],
      areasTitle: "Konaklama İçin Önerilen Bölgeler",
      areas: [
        { name: "Baixa & Rossio", desc: "Şehrin kalbi sayılan bu bölgeler, daha düz sokakları, kolay ulaşım imkânları ve merkezi konumları sayesinde Lizbon'u yürüyerek keşfetmek isteyen misafirler için ideal seçimlerdir." },
        { name: "Chiado", desc: "Kafeleri, restoranları, mağazaları ve tarihi atmosferiyle Lizbon'un en sevilen semtlerinden biridir. Merkezi konumu sayesinde birçok noktaya yürüyerek ulaşmak mümkündür." },
        { name: "Avenida da Liberdade", desc: "Geniş bulvarları, kaliteli otelleri ve rahat yürüyüş imkânlarıyla özellikle konfor arayan misafirler için tavsiye edilir." },
        { name: "Príncipe Real", desc: "Şık restoranları, butik mağazaları ve keyifli atmosferiyle tercih edilen bir bölgedir. Ancak bazı sokakları eğimlidir." },
        { name: "Yokuşlu Bölgeler", desc: "Alfama ve Bairro Alto, Lizbon'un en karakteristik ve güzel semtleri arasında yer alır. Ancak oldukça yokuşlu, merdivenli ve taş döşeli sokaklara sahiptir. Şehirdeki otantik atmosferi deneyimlemek isteyenler için harika seçenekler olsa da hareket kısıtlılığı olan misafirlerimizin konaklama tercihi yaparken bunu dikkate almalarını öneririz." },
      ],
      closing: "Şehri rahatça gezmek isteyen misafirlerimiz için özellikle Baixa, Rossio, Chiado ve Avenida da Liberdade bölgelerinde konaklamayı tavsiye ediyoruz. Lizbon'da sizlerle birlikte kutlama yapmayı sabırsızlıkla bekliyoruz!",
    },
    travel: {
      eyebrow: "Ulaşım",
      title: "Yolculuk & Konaklama",
      sub: "En yakın havalimanı Lizbon (LIS); mekân 30 dakika güneyde.",
      cards: [
        { tag: "Uçuşlar", title: "Lizbon'a uçun (LIS)", body: "Avrupa'nın çoğu şehrinden ve birçok Kuzey Amerika havalimanından direkt uçuşlar var. Cuma öğlene kadar varmayı hedefleyin.", meta: "≈ Mekâna 30 dk araba" },
        { tag: "Otel kotası", title: "Pousada de Palmela", body: "Avantajlı bir tarife ile oda kotamız var. 30 Haziran 2026'dan önce DERIN-MIGUEL koduyla rezervasyon yapın.", meta: "Servisler dâhil" },
        { tag: "Çevre", title: "Setúbal & Azeitão", body: "Tatili uzatmak isteyenler için yakında birçok küçük pansiyon ve çiftlik evi var.", meta: "Favorilerimizi paylaşacağız" },
      ],
    },
    rsvp: {
      eyebrow: "Davetimize yanıtınız",
      title: "Katılım",
      sub: "30.06.2026 tarihine kadar her konuk için ayrı bir form doldurarak katılım bilginizi iletmenizi bekliyoruz.",
      labels: {
        firstName: "Ad", lastName: "Soyad",
        email: "E-posta", attending: "Bizimle olacak mısınız?",
        yes: "Evet", no: "Hayır",
        diet: "Beslenme tercihleri", dietPh: "Alerjiler, tercihler…",
        paperInvite: "Basılı davetiye almak ister misiniz?",
        paperYes: "Evet, lütfen", paperNo: "Hayır, teşekkürler",
        addressLabel: "Posta adresi",
        addressLine1: "Sokak ve numara", addressLine1Ph: "Ör.: Atatürk Cd. 12",
        addressCity: "Şehir", addressCityPh: "Şehir",
        addressPostcode: "Posta kodu", addressPostcodePh: "Posta kodu",
        addressCountry: "Ülke", addressCountryPh: "Ülke",
        submit: "Gönder",
        sending: "Gönderiliyor…",
      },
      success: {
        ay: "Harika.", msg: "Yanıtınız bize ulaşıyor.",
        small: "Yaklaştıkça tüm detayları paylaşacağız.",
        againText: "Başka bir kişi için de mi dolduruyorsunuz? Aşağıya tıklayın.",
        againBtn: "Formu yeniden doldur",
      },
    },
    faq: {
      eyebrow: "Detaylar",
      title: "Sorular",
      items: [
        { q: "Eylül sonunda hava nasıl olur?", a: "Gündüzler ılık (yaklaşık 24°C), akşamlar serindir. Gün batımı sonrası için ince bir şal ya da ceket iyi olur." },
        { q: "Mekânda otopark var mı?", a: "Evet, geniş bir otoparkımız var. Yine de Lizbon'dan kalkacak servisimizi kullanmanızı öneririz." },
        { q: "Ne giymeliyim?", a: "Kendinizi rahat hissettiğiniz kıyafetleri giyebilirsiniz; renkli kıyafetler tercih edilir." },
        { q: "Servisler saat kaçta kalkacak?", a: "Saat 02:00 gibi Lizbon merkezine servis ayarlayacağız." },
      ],
    },
    footer: { love: "tüm sevgimizle", 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;