/* Building blocks for the single reference design: Nav · Experiences · Footer */

function Monogram({ size = 46, tone = "dark" }) {
  const v = tone === "light" ? "#ffffff" : "var(--navy-900)";
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ flex: "0 0 auto", overflow: "visible" }} aria-hidden="true">
      <circle cx="50" cy="50" r="46" fill="none" stroke="var(--gold-500)" strokeWidth="1.6" />
      <text x="50" y="69" textAnchor="middle" fill={v}
      style={{ fontFamily: '"IvyPresto Display", Georgia, serif', fontSize: "58px", fontWeight: 400 }}>V</text>
      <path d="M22 56 C34 47, 43 60, 51 54 C59 48, 68 60, 80 50" fill="none"
      stroke="var(--gold-500)" strokeWidth="2.6" strokeLinecap="round" />
    </svg>);

}

function WordMark({ tone = "dark", size = 1 }) {
  const col = tone === "light" ? "#fff" : "var(--navy-900)";
  const gold = tone === "light" ? "var(--gold-300)" : "var(--gold-600)";
  return (
    <a href="#top" style={{ display: "flex", alignItems: "center", gap: 13 * size, lineHeight: 1 }}>
      <Monogram size={46 * size} tone={tone} />
      <span style={{ display: "flex", flexDirection: "column", gap: 5 * size }}>
        <span style={{ fontFamily: "var(--serif)", fontWeight: 400, letterSpacing: ".16em",
          fontSize: 17 * size, color: col }}>VILLASIMIUS</span>
        <span style={{ display: "flex", alignItems: "center", gap: 7 * size }}>
          <span style={{ height: 1, width: 14 * size, background: gold, opacity: .7 }}></span>
          <span style={{ fontFamily: "var(--sans)", fontWeight: 600, letterSpacing: ".40em",
            fontSize: 8.5 * size, color: gold, textIndent: ".40em" }}>CHARTER</span>
          <span style={{ height: 1, width: 14 * size, background: gold, opacity: .7 }}></span>
        </span>
      </span>
    </a>);

}

function LangToggle({ lang, setLang, tone }) {
  const onDark = tone === "light";
  return (
    <div style={{ display: "inline-flex", border: `1px solid ${onDark ? "rgba(255,255,255,.35)" : "var(--line)"}`,
      borderRadius: "var(--radius-pill)", overflow: "hidden", fontFamily: "var(--sans)" }}>
      {["en", "it"].map((l) =>
      <button key={l} onClick={() => setLang(l)} style={{ border: 0, cursor: "pointer",
        padding: "6px 12px", fontSize: 12, fontWeight: 600, letterSpacing: ".06em",
        background: lang === l ? onDark ? "#fff" : "var(--navy-900)" : "transparent",
        color: lang === l ? onDark ? "var(--navy-900)" : "#fff" : onDark ? "rgba(255,255,255,.85)" : "var(--fg-3)",
        transition: ".2s" }}>{l.toUpperCase()}</button>
      )}
    </div>);

}

function Nav({ t, lang, setLang, heroTone = "light", forceSolid = false }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 40);
    f();window.addEventListener("scroll", f);return () => window.removeEventListener("scroll", f);
  }, []);
  const solid = scrolled || forceSolid;
  const tone = solid ? "dark" : heroTone;
  const linkCol = tone === "light" ? "rgba(255,255,255,.88)" : "var(--fg-2)";
  const scrim = !solid && (heroTone === "light" ?
  "linear-gradient(180deg,rgba(4,34,62,.55),transparent)" :
  "linear-gradient(180deg,rgba(251,248,242,.85),transparent)");
  return (
    <header style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 60,
      background: solid ? "rgba(251,248,242,.86)" : "transparent",
      backdropFilter: solid ? "saturate(140%) blur(14px)" : "none",
      borderBottom: solid ? "1px solid var(--line)" : "1px solid transparent",
      transition: "background .4s, border-color .4s" }}>
      {scrim && <div style={{ position: "absolute", inset: 0, background: scrim, pointerEvents: "none" }}></div>}
      <div className="wrap" style={{ position: "relative", display: "flex", alignItems: "center",
        justifyContent: "space-between", height: 78 }}>
        <WordMark tone={tone} />
        <nav style={{ display: "flex", alignItems: "center", gap: 30 }} className="nav-links" data-comment-anchor="5e2dab901e-nav-75-9">
          {[["experiences", "#experiences"], ["contact", "#contact"]].map(([k, h], i) =>
          <a key={k} href={h} style={{ fontSize: 14, fontWeight: 500, letterSpacing: ".02em", color: linkCol,
            transition: ".2s" }} onMouseEnter={(e) => e.currentTarget.style.color = tone === "light" ? "#fff" : "var(--gold-700)"}
          onMouseLeave={(e) => e.currentTarget.style.color = linkCol}>{t.nav[k]}</a>
          )}
          <LangToggle lang={lang} setLang={setLang} tone={tone} />
          <a href="#contact" className={"btn btn-wa-out" + (tone === "light" ? " on-deep" : "")} style={{ padding: "11px 20px" }}><I.wa />{t.nav.whatsapp}</a>
          <a href="https://www.instagram.com/villasimiuscharter/" target="_blank" aria-label="Instagram" className="nav-ig" style={{ color: linkCol }}><I.ig style={{ width: 20, height: 20 }} /></a>
        </nav>
        <div className="nav-mobile" style={{ display: "none", alignItems: "center" }}>
          <LangToggle lang={lang} setLang={setLang} tone={tone} />
        </div>
      </div>
    </header>);

}

function SailDivider({ tone = "dark" }) {
  const col = tone === "light" ? "var(--gold-300)" : "var(--gold-500)";
  const line = tone === "light" ? "var(--line-on-deep)" : "var(--line)";
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 18, margin: "22px 0 26px" }}>
      <span style={{ height: 1, width: "clamp(48px,12vw,120px)", background: line }}></span>
      <I.sail style={{ width: 30, height: 30, color: col, flex: "0 0 auto" }} />
      <span style={{ height: 1, width: "clamp(48px,12vw,120px)", background: line }}></span>
    </div>);

}

function Experiences({ t }) {
  return (
    <section className="section sand" id="experiences">
      <div className="wrap">
        <Reveal className="center" style={{ maxWidth: 660, margin: "0 auto 8px" }}>
          <span className="eyebrow center">{t.exp.eyebrow}</span>
          <h2 className="h-xl" style={{ margin: "18px 0 0" }}>{t.exp.h}</h2>
          <SailDivider />
          <p className="lede mx-auto" style={{ textAlign: "center" }}>{t.exp.p}</p>
        </Reveal>

        <div style={{ maxWidth: 1080, margin: "clamp(36px,5vw,60px) auto 0" }}>
          {t.exp.items.map((it, i) =>
          <Reveal key={i} delay={i * 60} className="exp-row"
          style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", gap: "clamp(28px,4vw,60px)",
            alignItems: "center", padding: "clamp(28px,4vw,46px) 0",
            borderTop: i === 0 ? "none" : "1px solid var(--line)" }}>
              <Slot id={"exp-" + i} ph={it.t} shape="rect"
            style={{ width: "100%", height: "auto", aspectRatio: "16 / 10", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-md)" }} />
              <div>
                <span className="eyebrow no-rule" style={{ marginBottom: 14, display: "inline-block" }}>{it.label}</span>
                <h3 className="h-lg" style={{ margin: "0 0 16px" }}>{it.t}</h3>
                <hr className="gold-rule" style={{ marginBottom: 18 }} />
                <p style={{ color: "var(--fg-2)", margin: "0 0 20px", fontSize: 16.5, lineHeight: 1.7, maxWidth: "42ch" }}>{it.d}</p>
                <a href="#contact" className="link-gold">{t.exp.discover} <I.arrow /></a>
              </div>
            </Reveal>
          )}
        </div>

        <Reveal className="center" style={{ maxWidth: 720, margin: "clamp(30px,4vw,46px) auto 0" }}>
          <SailDivider />
          <p className="h-md" style={{ margin: 0, color: "var(--navy-900)" }}>{t.exp.closer}</p>
        </Reveal>
      </div>
    </section>);

}

function Footer({ t, lang }) {
  return (
    <footer id="contact" style={{ background: "var(--navy-900)", color: "var(--fg-on-deep)", borderTop: "1px solid var(--line-on-deep)" }}>
      <div className="wrap" style={{ padding: "clamp(56px,7vw,84px) 32px 30px" }}>
        <div className="footer-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 40, alignItems: "start" }}>
          <div>
            <WordMark tone="light" />
            <p className="muted" style={{ maxWidth: 320, marginTop: 18, fontSize: 15 }}>{t.footer.tagline}</p>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 24 }}>
              <a href="#contact" className="btn btn-gold"><I.wa />{t.cta.wa}</a>
              <a href="https://www.instagram.com/villasimiuscharter/" target="_blank" className="btn btn-ghost on-deep"><I.ig />{t.cta.ig}</a>
            </div>
          </div>
          <div>
            <div className="eyebrow on-deep no-rule" style={{ marginBottom: 18 }}>{t.footer.connect}</div>
            <div style={{ display: "flex", gap: 12 }}>
              <a href="https://www.instagram.com/villasimiuscharter/" target="_blank" aria-label="Instagram" className="foot-soc"><I.ig style={{ width: 20, height: 20 }} /></a>
              <a href="#" aria-label="WhatsApp" className="foot-soc" title="WhatsApp — coming soon"><I.wa style={{ width: 20, height: 20 }} /></a>
            </div>
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12,
          marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--line-on-deep)", fontSize: 13 }} className="muted">
          <span>© {new Date().getFullYear()} {t.footer.rights}</span>
          <span style={{ display: "flex", alignItems: "center", gap: 8 }}><I.wave style={{ width: 34, color: "var(--gold-300)" }} /> Made on the coast</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Monogram, WordMark, LangToggle, Nav, SailDivider, Experiences, Footer });