/* --- Panos Melekkis · core components --- */
/* React global. Exports to window for cross-script sharing. */

const { useState, useEffect, useRef, useMemo, useCallback } = React;
const D = window.PM_DATA;

/* ----------------------------- helpers ----------------------------- */

function Arrow({ d = "right" }) {
  // simple chevron-like arrow inside circles
  const rotate = { right: 0, "up-right": -45, down: 90, up: -90 }[d] || 0;
  return (
    <svg width="14" height="14" viewBox="0 0 16 16" style={{ transform: `rotate(${rotate}deg)` }} fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M2 8h12M9 3l5 5-5 5"></path>
    </svg>
  );
}

function useReveal() {
  // adds 'is-in' to .fi children when scrolled into view
  useEffect(() => {
    const els = document.querySelectorAll(".fi:not(.is-in)");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ----------------------------- Nav ----------------------------- */

function Nav({ onBook, currency, setCurrency, navMode }) {
  // navMode: 'over' (transparent on hero), 'light' (light bg), 'solid' (dark when scrolled past hero)
  const cls = "nav " + (navMode === "light" ? "is-light" : navMode === "solid" ? "is-solid" : "");
  return (
    <header className={cls}>
      <div className="nav-row">
        <div className="nav-left">
          <a className="nav-link" href="#collections">Collections</a>
          <a className="nav-link" href="#bridal">Engagement & Bridal</a>
          <a className="nav-link" href="#bespoke">Bespoke</a>
        </div>
        <a className="nav-logo-wrap" href="#top" aria-label="Panos Melekkis — home">
          <img className="nav-logo" src="media/logo-panos-melekkis.svg" alt="Panos Melekkis" />
        </a>
        <div className="nav-right">
          <CurrencyChips compact currency={currency} setCurrency={setCurrency} />
          <a className="nav-link" href="#ateliers">Ateliers</a>
          <button className="cta-pill" onClick={onBook}>
            <span className="dot"></span>
            Book a consultation
          </button>
        </div>
      </div>
    </header>
  );
}

function CurrencyChips({ currency, setCurrency, compact = false }) {
  return (
    <div className="cc-row" role="group" aria-label="Currency">
      {D.currencies.map((c) => (
        <button
          key={c.code}
          className={"cc-pill " + (currency === c.code ? "is-active" : "")}
          onClick={() => setCurrency(c.code)}
          title={`Display prices in ${c.code}`}
        >
          {c.code}
        </button>
      ))}
    </div>
  );
}

/* ----------------------------- Hero ----------------------------- */

function Hero({ sceneIx, setSceneIx, onBook, onExplore, signature }) {
  // auto-advance unless user manually picks
  const [autoPlay, setAutoPlay] = useState(true);
  useEffect(() => {
    if (!autoPlay) return;
    const id = setInterval(() => {
      setSceneIx((i) => (i + 1) % D.scenes.length);
    }, 6800);
    return () => clearInterval(id);
  }, [autoPlay, setSceneIx]);

  const scene = D.scenes[sceneIx];

  return (
    <section id="top" className="hero">
      <div className="hero-stage">
        {D.scenes.map((s, i) => (
          <div className={"hero-slide " + (i === sceneIx ? "is-active" : "")} key={s.id}>
            <img src={s.img} alt="" />
          </div>
        ))}
        <div className="hero-veil"></div>
      </div>

      <div className="hero-content">
        <div className="hero-eyebrow-row">
          <span className="hr-gold"></span>
          <span className="eyebrow">PM · est. 2008 · Dubai d3 · Limassol</span>
        </div>

        <div>
          <h1 className="hero-title">
            {scene.titleA}<em>{scene.titleEm}</em>{scene.titleB}
            {signature && (
              <span className="sig-mark" style={{ display: "block", fontSize: "0.32em", marginTop: 24 }}>
                — Panos&nbsp;Melekkis
              </span>
            )}
          </h1>

          <div className="hero-bottom" style={{ marginTop: 36 }}>
            <p className="hero-sub">{scene.sub}</p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={onBook}>
                Book a consultation
                <Arrow d="up-right" />
              </button>
              <button className="btn" onClick={onExplore}>
                Explore the house
                <Arrow d="right" />
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* scene rail */}
      <div className="hero-rail">
        {D.scenes.map((s, i) => (
          <button
            key={s.id}
            className={i === sceneIx ? "is-active" : ""}
            onClick={() => {
              setAutoPlay(false);
              setSceneIx(i);
            }}
          >
            <span className="tick"></span>
            {s.label}
          </button>
        ))}
      </div>

      <div className="hero-meta-row">
        <span><b>{String(sceneIx + 1).padStart(2, "0")}</b>&nbsp;/ {String(D.scenes.length).padStart(2, "0")}</span>
        <span>Scene · <b>{scene.label}</b></span>
        <span>Photography — house archive</span>
      </div>
    </section>
  );
}

/* ----------------------------- Credibility strip ----------------------------- */

function CredibilityStrip() {
  return (
    <section className="cred">
      <div className="cred-row">
        {D.credibility.map((c, i) => (
          <div className="cred-cell" key={i}>
            <span className="eyebrow">— {c.eyebrow}</span>
            <span className="label">{c.label}</span>
            <span className="meta">{c.meta}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ----------------------------- Collections grid ----------------------------- */

function CollectionsSection({ onOpen, density }) {
  return (
    <section id="collections" className={"section section-ivory"}>
      <div className="wrap">
        <div className="section-head fi">
          <div className="pre">
            <span className="eyebrow">— The Collections</span>
            <h2 className="h-section">
              Eight design stories, <span className="serif-it gold">cast in 18k.</span>
            </h2>
          </div>
          <div className="lead">
            <p>
              Each collection is a separate design idea — emeralds on red velvet, black diamonds in pavé, an architectural arch repeated as a chain. Click any collection to read its story and see live prices from the shop.
            </p>
          </div>
        </div>

        <div className="coll-grid fi">
          {D.collections.map((c, i) => (
            <CollectionCard key={c.id} c={c} ix={i} onOpen={() => onOpen(c.id)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function CollectionCard({ c, ix, onOpen }) {
  const span = c.span || 1;
  const cls = "coll-card " + (span === 2 ? "card-2" : "");
  return (
    <button className={cls} onClick={onOpen} aria-label={`Open ${c.name} collection`}>
      <img src={c.cover} alt={c.name + " — " + c.eyebrow} loading="lazy" />
      <div className="top-eyebrow">
        <span>{c.eyebrow}</span>
        <span>{String(ix + 1).padStart(2, "0")}</span>
      </div>
      <div className="meta">
        <div className="name">
          <span className="roman">House Collection</span>
          {c.name}
        </div>
        <div className="arrow">
          <Arrow d="up-right" />
        </div>
      </div>
    </button>
  );
}

/* ----------------------------- Designer teaser ----------------------------- */

function DesignerSection() {
  return (
    <section id="designer" className="section section-bone">
      <div className="wrap">
        <div className="designer fi">
          <div className="image">
            <img src="media/media-23-panos-melekkis-ethos.webp" alt="The designer at work" loading="lazy" />
            <div className="stamp">
              <span>Designed by</span>
              <b>P. Melekkis</b>
              <span>GIA · 2008</span>
            </div>
          </div>
          <div className="copy">
            <span className="eyebrow">— The Designer</span>
            <h2 className="h-section">
              A gemologist <span className="serif-it gold">in the room.</span>
            </h2>
            <p>
              Panos graduated from the Gemological Institute of America in Florence in 2008, and opened his first boutique in Limassol the same year. A second design studio followed in Dubai Design District — where each Empire bangle and Quantum Love pendant is now drawn, cast and finished by the designer himself.
            </p>
            <p>
              No middlemen. No marketing agency. Every centre stone is hand-selected by Panos, and the same gemologist who graded it is the one who designs the setting it sits in.
            </p>
            <div className="credentials">
              {D.designerStats.map((s, i) => (
                <div className="item" key={i}>
                  <div className="num serif-it">{s.num}</div>
                  <div className="lab">{s.lab}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn-ghost-dark" href="#designer-full">
                Read the story
                <Arrow d="right" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------- Bespoke band ----------------------------- */

function BespokeSection({ onBook }) {
  return (
    <section id="bespoke" className="section section-house">
      <div className="wrap">
        <div className="bespoke fi">
          <div className="image">
            <img src="media/media-20-bespoke-design-your-own.webp" alt="A bespoke commission in progress" loading="lazy" />
          </div>
          <div className="copy">
            <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>— Bespoke & Redesign</span>
            <h2 className="lead">
              Custom-made jewellery <em>in an era of mass production.</em>
            </h2>
            <p style={{ maxWidth: "48ch", opacity: 0.84, fontSize: 16, lineHeight: 1.7 }}>
              One-to-one design, gemstone selection by appointment, and the option to redesign heirloom pieces using their original stones. Three steps, two ateliers, one designer.
            </p>
            <div className="steps">
              {D.bespokeSteps.map((s) => (
                <div className="step" key={s.n}>
                  <div className="num">— Step {s.n}</div>
                  <div className="name">{s.name}</div>
                  <p>{s.body}</p>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 14 }}>
              <button className="btn btn-primary" onClick={onBook}>
                Book a consultation
                <Arrow d="up-right" />
              </button>
              <a className="btn" href="#bridal" style={{ color: "var(--ivory)", borderColor: "var(--ivory)" }}>
                Bridal journey
                <Arrow d="right" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------- Bridal section ----------------------------- */

function BridalSection({ onBook, currency }) {
  // Pull the Love & Engagement collection for inline pricing
  const ring = D.collections.find((c) => c.id === "love-engagement");
  const lowest = ring.priceFrom;
  return (
    <section id="bridal" className="section section-ivory">
      <div className="wrap">
        <div className="section-head fi">
          <div className="pre">
            <span className="eyebrow">— Engagement & Bridal</span>
            <h2 className="h-section">
              A single ring. <span className="serif-it gold">Then everything around it.</span>
            </h2>
          </div>
          <div className="lead">
            <p>
              Engagement rings priced live in the shop. Wedding bands matched to the centre stone. A bridal consultation is the same person, twice — the gemologist who chooses the centre stone is the designer who sets it.
            </p>
            <p className="cap" style={{ marginTop: 14, opacity: 0.7 }}>
              From <b>{window.PM_fmtPrice(lowest, currency)}</b> · live multi-currency from the shop
            </p>
          </div>
        </div>

        <div className="col-3 fi">
          <div className="atelier-card" style={{ background: "var(--noir)", color: "var(--ivory)", border: 0 }}>
            <div className="head">
              <div>
                <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>— Step One</span>
                <div className="city">The Stone</div>
              </div>
            </div>
            <p className="addr" style={{ opacity: 0.85 }}>
              GIA-certified centre diamonds sourced from Antwerp and Surat. Coloured stones — sapphires, emeralds, paraibas — chosen for cut over weight.
            </p>
          </div>

          <div className="atelier-card" style={{ background: "var(--noir)", color: "var(--ivory)", border: 0 }}>
            <div className="head">
              <div>
                <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>— Step Two</span>
                <div className="city">The Ring</div>
              </div>
            </div>
            <p className="addr" style={{ opacity: 0.85 }}>
              LR140-series settings as a starting point, or a fully bespoke ring with two hand-drawn revisions included. 18k yellow, rose or white gold.
            </p>
          </div>

          <div className="atelier-card" style={{ background: "var(--house)", color: "var(--ivory)", border: 0 }}>
            <div className="head">
              <div>
                <span className="eyebrow" style={{ color: "var(--gold-soft)" }}>— Step Three</span>
                <div className="city">The Pair</div>
              </div>
            </div>
            <p className="addr" style={{ opacity: 0.92 }}>
              Wedding bands made to match the engagement ring profile. Initials, dates and symbols hand-engraved at the Limassol atelier.
            </p>
            <button className="btn" onClick={onBook} style={{ color: "var(--ivory)", borderColor: "var(--ivory)", marginTop: 8 }}>
              Begin the consultation
              <Arrow d="up-right" />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------- Press strip ----------------------------- */

function PressStrip() {
  return (
    <section className="section section-ivory" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="wrap">
        <div className="press">
          <span className="lab">— As featured in</span>
          <div className="quote">{D.press.quote}</div>
          <div className="src">
            <span className="hr-gold"></span>
            {D.press.src}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----------------------------- Ateliers ----------------------------- */

function AtelierSection() {
  return (
    <section id="ateliers" className="section section-bone">
      <div className="wrap">
        <div className="section-head fi">
          <div className="pre">
            <span className="eyebrow">— Visit · Two Ateliers</span>
            <h2 className="h-section">
              In Dubai d3, <span className="serif-it gold">and on Makarios Avenue.</span>
            </h2>
          </div>
          <div className="lead">
            <p>
              The Dubai design studio is by appointment — quiet, private, and a single ring at a time. The Limassol boutique is open during working hours, with the full archive on display.
            </p>
          </div>
        </div>

        <div className="col-2 fi">
          {D.ateliers.map((a) => (
            <AtelierCard a={a} key={a.id} />
          ))}
        </div>
      </div>
    </section>
  );
}

function AtelierCard({ a }) {
  return (
    <div className={"atelier-card " + (a.appointment ? "appointment-only" : "")}>
      <div className="head">
        <div>
          <span className="eyebrow">— Atelier · {a.city.slice(0, 2).toUpperCase()}</span>
          <div className="city serif-it">{a.city}</div>
        </div>
        <div className="pm-seal">PM</div>
      </div>

      <div className="addr" style={{ whiteSpace: "pre-line" }}>{a.addr}</div>

      <div className="map">
        <FauxMap city={a.city} />
        <span className="pin"></span>
      </div>

      <div className="hours">
        {a.hours.map((row, i) => (
          <React.Fragment key={i}>
            <b>{row[0]}</b>
            <span>{row[1]}</span>
          </React.Fragment>
        ))}
      </div>

      <p className="cap" style={{ opacity: 0.6, margin: 0, lineHeight: 1.5 }}>{a.note}</p>

      <div className="links">
        <a href={`tel:${a.telRaw}`}>
          <span>Call</span> {a.tel}
        </a>
        <a href={`mailto:${D.contact.email}`}>
          Email atelier
        </a>
      </div>
    </div>
  );
}

function FauxMap({ city }) {
  // simple stylized map. No external embeds (offline-safe).
  // city used to vary lines/labels
  return (
    <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id={"grid-" + city} width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(27,23,20,0.07)" strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="320" height="180" fill="#ECE3D5" />
      <rect width="320" height="180" fill={`url(#grid-${city})`} />
      {/* a few "streets" */}
      <path d="M -20 110 Q 60 90 130 100 T 280 70 L 360 50" fill="none" stroke="rgba(27,23,20,0.25)" strokeWidth="2" />
      <path d="M 40 -20 L 90 80 L 160 120 L 220 200" fill="none" stroke="rgba(27,23,20,0.18)" strokeWidth="2" />
      <path d="M 200 -20 L 180 60 L 220 100 L 260 180" fill="none" stroke="rgba(27,23,20,0.18)" strokeWidth="2" />
      <path d="M -20 40 L 80 30 L 180 20 L 320 10" fill="none" stroke="rgba(27,23,20,0.13)" strokeWidth="1.5" />
      <text x="20" y="170" fontFamily="ui-monospace, Menlo, monospace" fontSize="10" fill="rgba(27,23,20,0.5)" letterSpacing="2">
        {city.toUpperCase()}
      </text>
      <text x="260" y="20" fontFamily="ui-monospace, Menlo, monospace" fontSize="9" fill="rgba(27,23,20,0.4)" letterSpacing="1.5">
        N ↑
      </text>
    </svg>
  );
}

/* ----------------------------- Footer ----------------------------- */

function Footer({ onBook }) {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-col foot-brand">
            <img className="mark" src="media/logo-panos-melekkis.svg" alt="Panos Melekkis" />
            <p>Fine & bespoke jewellery by GIA-gemologist Panos Melekkis. 18k gold & selected diamonds. Ateliers in Dubai Design District and Limassol.</p>
            <div className="socials">
              <a href="https://instagram.com/panosmelekkis" aria-label="Instagram" target="_blank" rel="noreferrer">IG</a>
              <a href="https://facebook.com/panosmelekkis" aria-label="Facebook" target="_blank" rel="noreferrer">FB</a>
              <a href="https://linkedin.com/company/panosmelekkis" aria-label="LinkedIn" target="_blank" rel="noreferrer">in</a>
            </div>
          </div>

          <div className="foot-col">
            <h4>House</h4>
            <ul>
              <li><a href="#collections">Collections</a></li>
              <li><a href="#bridal">Engagement & Bridal</a></li>
              <li><a href="#bespoke">Bespoke</a></li>
              <li><a href="#designer">The Designer</a></li>
              <li><a href="#ateliers">Ateliers</a></li>
            </ul>
          </div>

          <div className="foot-col">
            <h4>Visit</h4>
            <ul>
              <li>Dubai · d3 1A, 507</li>
              <li>+971 56 458 4432</li>
              <li>Limassol · Makarios 197</li>
              <li>+357 25 310 912</li>
              <li><a href="mailto:panos@panosmelekkis.com">panos@panosmelekkis.com</a></li>
            </ul>
          </div>

          <div className="foot-col">
            <h4>Service</h4>
            <ul>
              <li><button onClick={onBook} style={{ textAlign: "left" }}>Book consultation</button></li>
              <li><a href={`https://wa.me/${D.contact.waNumber}`} target="_blank" rel="noreferrer">WhatsApp</a></li>
              <li><a href="#shipping">Shipping & care</a></li>
              <li><a href="#privacy">Privacy</a></li>
              <li><a href="#terms">Terms</a></li>
            </ul>
          </div>
        </div>

        <div className="foot-bottom">
          <span>© 2008 — 2026 · Panos Melekkis Jewellery</span>
          <span>Dubai · Limassol · BG-045</span>
          <span>panosmelekkis.com — canonical</span>
        </div>
      </div>
    </footer>
  );
}

/* ----------------------------- WhatsApp FAB ----------------------------- */

function WaFab() {
  return (
    <a
      className="wa-fab"
      href={`https://wa.me/${D.contact.waNumber}?text=${encodeURIComponent(D.contact.waText)}`}
      target="_blank"
      rel="noreferrer"
      aria-label="Message on WhatsApp"
    >
      <span className="badge">CY</span>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M12 2a10 10 0 0 0-8.59 15.16L2 22l4.95-1.36A10 10 0 1 0 12 2zm5.46 14.21c-.23.65-1.34 1.23-1.86 1.31-.5.08-1.12.11-1.81-.11-.42-.13-.95-.31-1.64-.6-2.9-1.25-4.79-4.17-4.94-4.37-.14-.2-1.18-1.57-1.18-3 0-1.43.75-2.13 1.02-2.42.27-.29.6-.36.79-.36h.57c.18 0 .43-.07.67.51.23.6.79 2.06.86 2.21.07.14.11.31.02.51-.08.2-.13.31-.25.48-.13.16-.27.36-.39.49-.13.13-.27.27-.12.53.16.27.69 1.13 1.48 1.83 1.02.9 1.87 1.18 2.13 1.31.27.13.42.11.58-.07.16-.18.66-.77.84-1.04.18-.27.36-.22.6-.13.25.09 1.56.74 1.83.87.27.13.45.2.51.31.07.11.07.62-.16 1.27z" />
      </svg>
    </a>
  );
}

/* ----------------------------- Mobile bottom bar ----------------------------- */

function MobileBar({ onBook }) {
  return (
    <div className="mobile-bar">
      <a href={`tel:${D.contact.dubaiTel}`}>Call · Dubai</a>
      <button onClick={onBook}>Book a consultation</button>
    </div>
  );
}

/* ----------------------------- exports ----------------------------- */

Object.assign(window, {
  Nav,
  Hero,
  CredibilityStrip,
  CollectionsSection,
  DesignerSection,
  BespokeSection,
  BridalSection,
  PressStrip,
  AtelierSection,
  Footer,
  WaFab,
  MobileBar,
  Arrow,
  CurrencyChips,
  useReveal,
});