/* global React, IK */
const { useState } = React;

// === DESTINATIONS ===
function DestinationsSection({ lang }) {
  const T = IK.t[lang];
  return (
    <section id="destinations" data-screen-label="section-destinations" style={{ background: "var(--paper-2)" }}>
      <div className="wrap">
        <header style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 60, alignItems: "end", marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}><span className="rule" /> &nbsp; {T.destEyebrow}</div>
            <h2 className="display balance" style={{ fontSize: "clamp(40px, 5.4vw, 72px)" }}>{T.destTitle}</h2>
          </div>
          <p style={{ color: "var(--muted)", fontSize: 16, lineHeight: 1.7, maxWidth: 500 }} className="pretty">{T.destSub}</p>
        </header>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }}>
          {IK.destinations.map((d, i) => (
            <a key={d.slug} href="#" onClick={e => e.preventDefault()}
              className="cardlift imghover"
              style={{ position: "relative", aspectRatio: "4 / 5", overflow: "hidden",
                       background: "var(--blush)", color: "var(--paper)" }}>
              <img src={d.image} alt="" loading="lazy"
                style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{
                position: "absolute", inset: 0,
                background: "linear-gradient(180deg, rgba(14,12,11,0) 40%, rgba(14,12,11,.55) 100%)",
              }} />
              <div style={{
                position: "absolute", left: 22, right: 22, bottom: 22,
                display: "flex", alignItems: "end", justifyContent: "space-between", gap: 16,
              }}>
                <div>
                  <div className="cap" style={{ color: "rgba(251,247,242,.78)", marginBottom: 8 }}>{String(i+1).padStart(2,"0")} · Destination hub</div>
                  <h3 className="display" style={{ fontSize: 32, color: "var(--paper)" }}>{d.label[lang]}</h3>
                  <p style={{ marginTop: 6, fontSize: 13, color: "rgba(251,247,242,.78)" }}>{d.cities}</p>
                </div>
                <span style={{
                  width: 38, height: 38, borderRadius: "50%",
                  background: "rgba(251,247,242,.16)", border: "1px solid rgba(251,247,242,.4)",
                  display: "grid", placeItems: "center", color: "var(--paper)",
                }}>→</span>
              </div>
            </a>
          ))}
        </div>
        <p className="cap" style={{ marginTop: 32, textAlign: "center" }}>
          + Italy · Mexico · Bahrain · Qatar · Oman · &nbsp;programmes on request
        </p>
      </div>
    </section>
  );
}

// === SERVICES ===
function ServicesSection({ lang }) {
  const T = IK.t[lang];
  return (
    <section id="services" data-screen-label="section-services" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <header style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 72 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}><span className="rule" /> &nbsp; {T.servEyebrow}</div>
            <h2 className="display balance" style={{ fontSize: "clamp(40px, 5.4vw, 72px)" }}>{T.servTitle}</h2>
          </div>
          <p style={{ color: "var(--muted)", fontSize: 16, lineHeight: 1.7, maxWidth: 480 }} className="pretty">{T.servSub}</p>
        </header>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line)" }}>
          {IK.services.map((s, idx) => (
            <div key={idx} style={{
              padding: "44px 36px 44px 0",
              borderRight: idx < 2 ? "1px solid var(--line)" : "none",
              paddingLeft: idx > 0 ? 36 : 0,
            }}>
              <div className="cap" style={{ marginBottom: 18 }}>0{idx+1}</div>
              <h3 className="display" style={{ fontSize: 30, lineHeight: 1.15, marginBottom: 22, maxWidth: 280 }}>
                {s.group[lang]}
              </h3>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {s.items.map((it, j) => (
                  <li key={j} style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
                    <span style={{ color: "var(--rose)", fontFamily: "var(--f-mono)", fontSize: 11 }}>·{String(j+1).padStart(2,"0")}</span>
                    <span style={{ fontSize: 15, color: "var(--ink)" }}>{it[lang]}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Functions ribbon */}
        <div style={{ marginTop: 80, padding: "44px 0 0", borderTop: "1px solid var(--line)" }}>
          <div className="cap" style={{ marginBottom: 20 }}>South-Asian functions we plan, by tradition</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 24 }}>
            {IK.functionsList.map(f => (
              <div key={f.name}>
                <h4 className="display" style={{ fontSize: 24 }}>{f.name}</h4>
                <p style={{ fontSize: 13, color: "var(--muted)", marginTop: 6, lineHeight: 1.5 }}>{f.blurb}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// === PRESS / AWARDS ===
function PressSection({ lang }) {
  const T = IK.t[lang];
  return (
    <section id="press" data-screen-label="section-press" style={{ background: "var(--paper-2)", padding: "100px 0" }}>
      <div className="wrap">
        <header style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18, color: "var(--gold)" }}>
              <span className="rule" style={{ background: "var(--gold)" }} /> &nbsp; {T.pressEyebrow}
            </div>
            <h2 className="display balance" style={{ fontSize: "clamp(36px, 4.4vw, 60px)" }}>{T.pressTitle}</h2>
          </div>
          <p style={{ color: "var(--muted)", fontSize: 16, lineHeight: 1.7, maxWidth: 480 }} className="pretty">{T.pressSub}</p>
        </header>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 0,
          borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
        }}>
          {IK.press.map((p, i) => (
            <a key={p.name} href="#" onClick={e => e.preventDefault()}
              style={{
                padding: "44px 24px", display: "grid", placeItems: "center",
                borderRight: i < IK.press.length - 1 ? "1px solid var(--line)" : "none",
                opacity: 0.78, transition: "opacity .25s ease",
              }}
              onMouseEnter={e => e.currentTarget.style.opacity = 1}
              onMouseLeave={e => e.currentTarget.style.opacity = 0.78}
              aria-label={`Featured in ${p.name}`}>
              <img src={p.file} alt={p.name}
                style={{ maxHeight: 38, width: "auto", filter: "grayscale(1) contrast(.9)" }} />
            </a>
          ))}
        </div>

        {/* Award block */}
        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "auto 1fr", gap: 36, alignItems: "center",
          padding: "32px", background: "var(--paper)", border: "1px solid var(--line)",
        }}>
          <img src="media/badge-iwa-2026-local-rounds-winner.webp" alt=""
            style={{ width: 120, height: 120, objectFit: "contain" }} />
          <div>
            <div className="cap" style={{ color: "var(--gold)" }}>Award · attributed</div>
            <h3 className="display" style={{ fontSize: 30, marginTop: 8 }}>
              IWA 2026 — Local Rounds Winner
            </h3>
            <p style={{ marginTop: 10, color: "var(--muted)", fontSize: 14, maxWidth: 620 }}>
              Indian Wedding Awards 2026 · Regional round. We attribute this precisely:
              it is a local round result, not a global title — and it sits beside our editorial features
              as one piece of evidence, not the whole story.
            </p>
          </div>
        </div>

        {/* Honest non-rating note */}
        <p className="cap" style={{ marginTop: 36, textAlign: "center", maxWidth: 720, marginLeft: "auto", marginRight: "auto" }}>
          No aggregate star rating is displayed. We publish reviews only with the reviewer's named consent.
        </p>
      </div>
    </section>
  );
}

// === ABOUT / FOUNDERS ===
function AboutSection({ lang }) {
  const T = IK.t[lang];
  return (
    <section id="about" data-screen-label="section-about" style={{ background: "var(--paper)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}><span className="rule" /> &nbsp; {T.aboutEyebrow}</div>
            <h2 className="display balance" style={{ fontSize: "clamp(40px, 5.4vw, 72px)" }}>{T.aboutTitle}</h2>
            <p style={{ color: "var(--muted)", marginTop: 28, fontSize: 17, lineHeight: 1.7 }} className="pretty">
              {T.aboutSub}
            </p>
            <p style={{ color: "var(--muted)", marginTop: 18, fontSize: 14, lineHeight: 1.7 }}>
              Founded in Dubai. Founding date — verified with the team; we don't publish what we haven't confirmed.
            </p>
            <div style={{ marginTop: 36, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <a className="btn btn-ghost-ink" href="#contact">{T.bookCall}</a>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
            {IK.founders.map(f => (
              <article key={f.name} style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <div className="placeholder" style={{ aspectRatio: "4 / 5" }}>
                  PORTRAIT · {f.name.split(" ")[0]}
                </div>
                <div>
                  <h3 className="display" style={{ fontSize: 26 }}>{f.name}</h3>
                  <p className="cap" style={{ marginTop: 8, color: "var(--rose-deep)" }}>{f.role[lang]}</p>
                  <p style={{ marginTop: 16, color: "var(--muted)", fontSize: 14, lineHeight: 1.6 }}>{f.bio[lang]}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// === PACKAGES (bespoke framing, no prices) ===
function PackagesSection({ lang }) {
  const T = IK.t[lang];
  const tiers = [
    { name: "Full planning",        body: "We hold the entire calendar — from first phone call to last guest home. Dates, vendors, budget, hospitality, on-ground production." },
    { name: "Partial planning",     body: "You've started, we finish — vendor curation, day-of production, hospitality. Usually four to six months out." },
    { name: "Design & décor",       body: "Floral, scenography, lighting. A single function or a full multi-day arc. Often with our @ikigaiidecor team." },
    { name: "On-the-day",           body: "You've planned the whole wedding. We hold the running order so you don't have to. Bilingual coordinators." },
  ];
  return (
    <section id="packages" data-screen-label="section-packages" style={{ background: "var(--paper-2)" }}>
      <div className="wrap">
        <header style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "end", marginBottom: 64 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}><span className="rule" /> &nbsp; {T.packagesEyebrow}</div>
            <h2 className="display balance" style={{ fontSize: "clamp(36px, 4.8vw, 64px)" }}>{T.packagesTitle}</h2>
          </div>
          <p style={{ color: "var(--muted)", fontSize: 16, lineHeight: 1.7, maxWidth: 480 }} className="pretty">
            {T.packagesSub}
          </p>
        </header>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
                       borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
          {tiers.map((t, i) => (
            <div key={t.name} style={{
              padding: "36px 28px",
              borderRight: i < tiers.length - 1 ? "1px solid var(--line)" : "none",
            }}>
              <div className="cap" style={{ marginBottom: 16, color: "var(--rose)" }}>0{i+1}</div>
              <h3 className="display" style={{ fontSize: 26, lineHeight: 1.2 }}>{t.name}</h3>
              <p style={{ marginTop: 14, color: "var(--muted)", fontSize: 14, lineHeight: 1.6 }}>{t.body}</p>
              <p style={{ marginTop: 24, fontFamily: "var(--f-mono)", fontSize: 10.5, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--muted)" }}>
                Quoted bespoke
              </p>
            </div>
          ))}
        </div>

        <p className="cap" style={{ marginTop: 36, maxWidth: 720, marginInline: "auto", textAlign: "center" }}>
          No price card here, by design. We propose after we've heard the brief — dates, destinations, faith, family.
        </p>
      </div>
    </section>
  );
}

// === ENQUIRY FORM ===
function EnquirySection({ lang }) {
  const T = IK.t[lang];
  const [form, setForm] = useState({
    name: "", phone: "", email: "",
    date: "", guests: "120–180", destination: "United Arab Emirates",
    budget: "AED 250k – 500k", message: "",
    consent: false,
  });
  const [sent, setSent] = useState(false);
  const set = (k, v) => setForm(s => ({ ...s, [k]: v }));

  const waLink = () => {
    const txt = `Hi Ikigaii Planners, we'd like to enquire about planning our wedding.%0A%0AName: ${encodeURIComponent(form.name)}%0ADate: ${encodeURIComponent(form.date)}%0AGuests: ${encodeURIComponent(form.guests)}%0ADestination: ${encodeURIComponent(form.destination)}%0ABudget band: ${encodeURIComponent(form.budget)}%0A%0A${encodeURIComponent(form.message)}`;
    return `https://wa.me/971552873665?text=${txt}`;
  };

  return (
    <section id="contact" data-screen-label="section-contact" className="noir" style={{ padding: "120px 0" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "5fr 7fr", gap: 80 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18, color: "rgba(251,247,242,.7)" }}>
              <span className="rule" /> &nbsp; {T.contactEyebrow}
            </div>
            <h2 className="display balance" style={{ fontSize: "clamp(40px, 5.4vw, 72px)", color: "var(--paper)", whiteSpace: "pre-line" }}>
              {T.contactTitle}
            </h2>
            <p style={{ color: "rgba(251,247,242,.7)", marginTop: 28, fontSize: 16, lineHeight: 1.7, maxWidth: 440 }} className="pretty">
              {T.contactSub}
            </p>

            <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 18, color: "rgba(251,247,242,.85)" }}>
              <div>
                <div className="cap" style={{ color: "rgba(251,247,242,.5)" }}>WhatsApp / Call</div>
                <a className="display" href="https://wa.me/971552873665" style={{ fontSize: 26, color: "var(--paper)" }}>+971 55 287 3665</a>
              </div>
              <div>
                <div className="cap" style={{ color: "rgba(251,247,242,.5)" }}>Email</div>
                <a className="display" href="mailto:hello@ikigaiiplanners.com" style={{ fontSize: 22, color: "var(--paper)" }}>hello@ikigaiiplanners.com</a>
                <p className="cap" style={{ color: "rgba(251,247,242,.4)", marginTop: 4 }}>· branded mailbox, pending client confirmation</p>
              </div>
              <div>
                <div className="cap" style={{ color: "rgba(251,247,242,.5)" }}>Studio</div>
                <p className="display" style={{ fontSize: 20, color: "var(--paper)" }}>
                  Al Quoz 1, Sheikh Zayed Road<br/>
                  Dubai, U.A.E.
                </p>
                <p className="cap" style={{ color: "rgba(251,247,242,.4)", marginTop: 4 }}>· canonical building name pending</p>
              </div>
            </div>
          </div>

          <div>
            {sent ? (
              <div style={{ background: "var(--paper)", color: "var(--ink)", padding: 56, textAlign: "center", borderRadius: 4 }}>
                <div className="cap" style={{ color: "var(--rose-deep)", marginBottom: 16 }}>Received</div>
                <h3 className="display" style={{ fontSize: 42 }}>Thank you, {form.name || "friend"}.</h3>
                <p style={{ color: "var(--muted)", marginTop: 18, maxWidth: 420, marginInline: "auto" }} className="pretty">
                  We've received your enquiry. One of the founders will reply personally within one working day.
                </p>
                <div style={{ marginTop: 28, display: "flex", justifyContent: "center", gap: 14, flexWrap: "wrap" }}>
                  <a className="btn btn-rose" href={waLink()} target="_blank" rel="noreferrer">Continue on WhatsApp</a>
                  <button className="btn btn-ghost-ink" onClick={() => { setSent(false); }}>Send another</button>
                </div>
              </div>
            ) : (
              <form onSubmit={e => { e.preventDefault(); setSent(true); }}
                style={{ background: "var(--paper)", color: "var(--ink)", padding: 48,
                         display: "grid", gridTemplateColumns: "1fr 1fr", gap: "28px 24px", borderRadius: 4 }}>
                <div className="field"><label>Your name</label>
                  <input type="text" required value={form.name} onChange={e => set("name", e.target.value)} placeholder="Couple's name (one is fine)" /></div>
                <div className="field"><label>Phone (or WhatsApp)</label>
                  <input type="tel" required value={form.phone} onChange={e => set("phone", e.target.value)} placeholder="+971 …" /></div>
                <div className="field" style={{ gridColumn: "span 2" }}><label>Email</label>
                  <input type="email" required value={form.email} onChange={e => set("email", e.target.value)} placeholder="hello@…" /></div>
                <div className="field"><label>Wedding date</label>
                  <input type="date" value={form.date} onChange={e => set("date", e.target.value)} /></div>
                <div className="field"><label>Guest-count band</label>
                  <select value={form.guests} onChange={e => set("guests", e.target.value)}>
                    <option>Under 80</option>
                    <option>80–120</option>
                    <option>120–180</option>
                    <option>180–250</option>
                    <option>250–400</option>
                    <option>400+</option>
                  </select></div>
                <div className="field"><label>Destination</label>
                  <select value={form.destination} onChange={e => set("destination", e.target.value)}>
                    {["United Arab Emirates", "India", "Thailand", "Greece", "Italy", "Sri Lanka", "Mexico", "Bahrain", "Qatar", "Oman", "Other / undecided"].map(o => (
                      <option key={o}>{o}</option>
                    ))}
                  </select></div>
                <div className="field"><label>Budget band (optional)</label>
                  <select value={form.budget} onChange={e => set("budget", e.target.value)}>
                    <option>Prefer not to say</option>
                    <option>Under AED 250k</option>
                    <option>AED 250k – 500k</option>
                    <option>AED 500k – 1M</option>
                    <option>AED 1M – 2.5M</option>
                    <option>AED 2.5M +</option>
                  </select></div>
                <div className="field" style={{ gridColumn: "span 2" }}><label>Tell us a little about the celebration</label>
                  <textarea rows="4" value={form.message} onChange={e => set("message", e.target.value)}
                    placeholder="Functions you'd like (Haldi, Mehndi, Sangeet, Pheras, Nikah, Reception…), faith, family side of the world, anything else." /></div>

                <label style={{ gridColumn: "span 2", display: "flex", gap: 10, alignItems: "flex-start", fontSize: 12, color: "var(--muted)" }}>
                  <input type="checkbox" required checked={form.consent} onChange={e => set("consent", e.target.checked)}
                    style={{ marginTop: 3, accentColor: "var(--rose)" }} />
                  <span>I consent to Ikigaii Planners contacting me about my enquiry. We don't publish names, photos or testimonials without separate written consent.</span>
                </label>

                <div style={{ gridColumn: "span 2", display: "flex", gap: 14, flexWrap: "wrap" }}>
                  <button type="submit" className="btn btn-primary">Send enquiry <span className="arrow">→</span></button>
                  <a className="btn btn-ghost-ink" href={waLink()} target="_blank" rel="noreferrer">Send on WhatsApp instead</a>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// === FOOTER ===
function Footer({ lang }) {
  const T = IK.t[lang];
  return (
    <footer style={{ background: "var(--ink)", color: "rgba(251,247,242,.7)", padding: "72px 0 32px" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 40 }}>
        <div>
          <Wordmark color="var(--paper)" sub="luxury wedding & event planners" />
          <p style={{ marginTop: 22, fontSize: 13, lineHeight: 1.7, maxWidth: 320 }}>
            <em className="ikigai" style={{ color: "#E5C4A4" }}>ikigai</em> · a reason for being.
            We plan South-Asian, multicultural and destination weddings from a small studio in Dubai.
          </p>
        </div>
        <div>
          <div className="cap" style={{ color: "rgba(251,247,242,.4)", marginBottom: 14 }}>Plan</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
            {["Real weddings","Destinations","Services","Packages","Contact"].map(x =>
              <li key={x}><a href={`#${x.toLowerCase().replace(" ","-")}`}>{x}</a></li>)}
          </ul>
        </div>
        <div>
          <div className="cap" style={{ color: "rgba(251,247,242,.4)", marginBottom: 14 }}>Studio</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
            <li><a href="https://wa.me/971552873665">+971 55 287 3665</a></li>
            <li><a href="mailto:hello@ikigaiiplanners.com">hello@ikigaiiplanners.com</a></li>
            <li>Al Quoz 1, Dubai, U.A.E.</li>
          </ul>
        </div>
        <div>
          <div className="cap" style={{ color: "rgba(251,247,242,.4)", marginBottom: 14 }}>Elsewhere</div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 14 }}>
            <li><a href="#">Instagram · @ikigaiiplanners</a></li>
            <li><a href="#">YouTube · @ikigaiiplanners</a></li>
            <li><a href="#">Pinterest · ikigaiiplanners</a></li>
            <li className="cap" style={{ color: "rgba(251,247,242,.4)" }}>FB / TikTok — pending confirmation</li>
          </ul>
        </div>
      </div>
      <div className="wrap" style={{
        marginTop: 56, paddingTop: 24, borderTop: "1px solid rgba(251,247,242,.12)",
        display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16,
        fontSize: 12, color: "rgba(251,247,242,.45)",
      }}>
        <span>© 2026 {T.footerTag}</span>
        <span className="cap" style={{ color: "rgba(251,247,242,.45)" }}>EN · العربية · हिन्दी (phase 2)</span>
      </div>
    </footer>
  );
}

// Wordmark SVG — uses Italiana for the double-i flourish
function Wordmark({ color = "var(--ink)", sub }) {
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1 }}>
      <span style={{
        fontFamily: "var(--f-script)", fontSize: 28, color, letterSpacing: ".02em", lineHeight: 1,
      }}>Ikigai<span style={{ color: "var(--rose)" }}>i</span></span>
      {sub && <span className="cap" style={{ marginTop: 8, color: color === "var(--paper)" ? "rgba(251,247,242,.5)" : "var(--muted)" }}>{sub}</span>}
    </div>
  );
}

Object.assign(window, {
  DestinationsSection, ServicesSection, PressSection, AboutSection,
  PackagesSection, EnquirySection, Footer, Wordmark,
});
