/* features.jsx — privacy demo, features grid, how-it-works, concierge, app showcase */

function SectionHead({ eyebrow, title, lead, align = "split" }) {
  if (align === "center") {
    return (
      <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto 56px" }} className="reveal is-in">
        <div className="eyebrow"><span className="dot"></span>{eyebrow}</div>
        <h2 style={{ marginTop: 18 }}>{title}</h2>
        {lead && <p className="lead" style={{ marginTop: 18, marginInline: "auto" }}>{lead}</p>}
      </div>
    );
  }
  return (
    <div className="sec-head reveal is-in">
      <div>
        <div className="eyebrow"><span className="dot"></span>{eyebrow}</div>
        <h2 style={{ marginTop: 18 }}>{title}</h2>
      </div>
      {lead && <p className="lead">{lead}</p>}
    </div>
  );
}

/* Privacy demo */
function PrivacyDemo() {
  const [blur, setBlur] = React.useState(true);
  const [alias, setAlias] = React.useState(true);
  const [hideCaste, setHideCaste] = React.useState(false);

  return (
    <section id="features" className="section section--alt">
      <div className="container">
        <SectionHead
          eyebrow="Privacy by default"
          title={<>You decide what's seen,<br/>and who sees it.</>}
          lead="Every Lahmee profile starts private. Blur your photos, hide behind an alias, and reveal details only to matches you've trusted — there's no public profile dump, no algorithmic open-house."
        />

        <div className="priv" style={{ marginTop: 64 }}>
          <div className="priv__photo-wrap">
            <image-slot
              id="priv-photo"
              radius="0"
              placeholder="Drop a portrait here — works best with a Nepali woman, modern look, Kathmandu setting"
              src="assets/privacy-portrait.png"
              style={{
                position: "absolute", inset: 0, display: "block",
                width: "100%", height: "100%",
                filter: blur ? "blur(12px) saturate(90%)" : "none",
                transition: "filter .45s ease",
              }}
            />
            <div className="priv__overlay" style={{ pointerEvents: "none" }} />
            <span className="priv__chip" style={{ pointerEvents: "none" }}>
              <Icon.Lock size={11} /> {blur ? "Photo blurred" : "Photo visible"}
            </span>
            {hideCaste ? null : (
              <span style={{
                position: "absolute", top: 18, right: 18,
                background: "rgba(251,247,241,.86)", color: "var(--ink)",
                padding: "6px 10px", borderRadius: 999, fontSize: 12,
                backdropFilter: "blur(8px)",
                pointerEvents: "none",
              }}>Chhetri · Hindu</span>
            )}
            <div className="priv__alias" style={{ pointerEvents: "none" }}>
              <div className="alias">
                {alias ? "Mira S." : "Meera Shrestha"}, 28
              </div>
              <div className="meta">Architect · Kathmandu → Brooklyn</div>
            </div>
          </div>

          <div>
            <h3 style={{ fontSize: 32, lineHeight: 1.15, marginBottom: 14 }}>
              Try it. Toggle a control and watch the profile change.
            </h3>
            <p style={{ color: "var(--muted)", maxWidth: "44ch" }}>
              These are the same controls every member has, every day. Privacy isn't a setting we buried — it's the default.
            </p>
            <div className="priv__controls">
              <ToggleRow
                title="Blur my photos"
                desc="Photos render at a soft pixelation until you grant access."
                on={blur} onChange={() => setBlur(v => !v)}
              />
              <ToggleRow
                title="Use an alias"
                desc="Display a short first name + initial. Reveal full name when you're ready."
                on={alias} onChange={() => setAlias(v => !v)}
              />
              <ToggleRow
                title="Hide caste & religion"
                desc="Only show on profiles you've already exchanged interest with."
                on={hideCaste} onChange={() => setHideCaste(v => !v)}
              />
            </div>
            <div style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 10, fontSize: 13, color: "var(--muted)" }}>
              <Icon.Shield size={16} /> Profile changes apply instantly across every connection.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ToggleRow({ title, desc, on, onChange }) {
  return (
    <div className="toggle-row" onClick={onChange} style={{ cursor: "pointer" }}>
      <div>
        <div className="lbl">{title}</div>
        <div className="desc">{desc}</div>
      </div>
      <button className={"switch" + (on ? " is-on" : "")} onClick={(e) => { e.stopPropagation(); onChange(); }} aria-pressed={on} aria-label={title} />
    </div>
  );
}

/* Features grid */
function FeatureGrid() {
  const items = [
    {
      tag: "01 · Verification",
      ico: <Icon.Verified />,
      title: "Real people, every time.",
      desc: "Every profile is verified by our team within 24 hours — ID, photo, and a short video. No bots, no recycled photos, no surprises."
    },
    {
      tag: "02 · Filters",
      ico: <Icon.Filters />,
      title: "Filters that respect culture.",
      desc: "Search by caste, ethnicity, religion, profession, family background, language and diet — without the awkward stereotypes."
    },
    {
      tag: "03 · Conversation",
      ico: <Icon.Chat />,
      title: "Conversations, not collections.",
      desc: "Messages open only after both sides express interest. No unsolicited DMs, no read-receipt anxiety, no swipe spam."
    },
    {
      tag: "04 · Horoscope",
      ico: <Icon.Star />,
      title: "Optional horoscope match.",
      desc: "Built-in Vedic compatibility — gun milan, dosha analysis, ashtakoot — for families who care, hidden for those who don't."
    },
    {
      tag: "05 · Sketch mode",
      ico: <Icon.Lock />,
      title: "Sketch your picture.",
      desc: "A pencil-drawn version of your photo lets your personality come through without revealing what you look like — yet."
    },
    {
      tag: "06 · Concierge",
      ico: <Icon.Concierge />,
      title: "Human matchmakers, on call.",
      desc: "Prefer the traditional route? Our facilitators in Atlanta and Kathmandu introduce you, vet families, and walk with you to the wedding."
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          eyebrow="What makes Lahmee different"
          title={<>Built for marriage,<br/><span style={{ fontStyle: "italic", color: "var(--primary)" }}>not metrics.</span></>}
          lead="Every feature is in service of one thing — a partnership that lasts. Here are the six we'd lead with."
        />
        <div className="fgrid">
          {items.map((it, i) => (
            <div key={i} className="fcard reveal is-in" style={{ animationDelay: `${i * 60}ms` }}>
              <div className="tag">{it.tag}</div>
              <div className="ico" style={{ marginTop: 12 }}>{it.ico}</div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* How it works */
function HowItWorks() {
  const steps = [
    { n: "01", title: "Sign up & verify", desc: "Email, Google, or Apple. Our team verifies you within 24 hours." },
    { n: "02", title: "Build your profile", desc: "Values, culture, profession — what you bring, what you seek." },
    { n: "03", title: "Get curated matches", desc: "Daily, hand-picked recommendations based on what you actually want." },
    { n: "04", title: "Talk, then meet", desc: "Reveal yourself in stages. Chat in-app, then meet on your terms." },
  ];
  return (
    <section id="how" className="section section--paper">
      <div className="container">
        <SectionHead
          eyebrow="How it works"
          title={<>Four steps from <span style={{ fontStyle: "italic", color: "var(--primary)" }}>hello</span> to home.</>}
          lead="A clear path — built around verification, intention, and respect for your time."
        />
        <div className="hiw">
          {steps.map((s) => (
            <div key={s.n} className="hiw__step reveal is-in">
              <div className="n">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Concierge */
function Concierge() {
  return (
    <section className="section section--ink">
      <div className="container concierge">
        <div className="reveal is-in">
          <div className="eyebrow" style={{ color: "rgba(246,239,227,.65)" }}>
            <span className="dot" style={{ background: "var(--gold-2)" }}></span>
            Facilitator service · Beta
          </div>
          <h2 style={{ marginTop: 18, color: "#F6EFE3" }}>
            Want a real person<br/>
            <span style={{ fontStyle: "italic", color: "var(--blush)" }}>in your corner?</span>
          </h2>
          <p className="lead" style={{ color: "#C9B8A8", marginTop: 22 }}>
            Our matchmakers — based in Atlanta and Kathmandu — combine software, tradition, and a priest on speed-dial.
            They shortlist, vet, and introduce. You decide what happens next.
          </p>
          <ul style={{ listStyle: "none", padding: 0, marginTop: 28, display: "flex", flexDirection: "column", gap: 14, color: "#E9DDC8" }}>
            <li style={{ display: "flex", gap: 12 }}><span style={{ color: "var(--gold-2)" }}><Icon.Check size={16} /></span> One free 30-minute consultation</li>
            <li style={{ display: "flex", gap: 12 }}><span style={{ color: "var(--gold-2)" }}><Icon.Check size={16} /></span> Hand-picked shortlists, family-aware</li>
            <li style={{ display: "flex", gap: 12 }}><span style={{ color: "var(--gold-2)" }}><Icon.Check size={16} /></span> Bridge calls with both families, priest matching, event support</li>
          </ul>
          <div style={{ marginTop: 36, display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a className="btn" style={{ background: "var(--paper)", color: "var(--ink)" }} href="#">Book a free call <Icon.Arrow /></a>
            <a className="btn btn--ghost" style={{ color: "#F6EFE3", borderColor: "rgba(246,239,227,.25)" }} href="#">See success stories</a>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <div className="concierge__art" style={{
            backgroundImage: "url(https://i0.wp.com/nepalilami.com/wp-content/uploads/2023/06/DSC_0214-scaled.jpg?fit=900&ssl=1)"
          }} />
          <p className="concierge__quote">
            "We worked really hard to find his bride.<br/>Now they're happily married — that's the whole reason we do this."
            <span style={{ display: "block", fontStyle: "normal", fontFamily: "var(--font-sans)", fontSize: 12.5, letterSpacing: ".06em", marginTop: 12, color: "var(--blush-2)", textTransform: "uppercase" }}>— Pramila, Head Matchmaker</span>
          </p>
        </div>
      </div>
    </section>
  );
}

/* App showcase */
function AppShowcase() {
  return (
    <section id="download" className="section">
      <div className="container app-show">
        <div className="reveal is-in">
          <div className="eyebrow"><span className="dot"></span>Available everywhere</div>
          <h2 style={{ marginTop: 18 }}>
            Carry your match<br/>
            <span style={{ fontStyle: "italic", color: "var(--primary)" }}>in your pocket.</span>
          </h2>
          <p className="lead" style={{ marginTop: 22 }}>
            Push notifications when a match expresses interest, in-app horoscope matching, and eSewa, Stripe, and Apple Pay
            for premium — all in a quiet, focused app that doesn't try to keep you scrolling.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap", alignItems: "center" }}>
            <a href="https://apps.apple.com/us/app/nepalilami/id1547398543" target="_blank" rel="noopener noreferrer" aria-label="Download on the App Store" className="store-badge">
              <img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" alt="Download on the App Store" style={{ height: 52, width: "auto", display: "block" }} />
            </a>
            <a href="https://play.google.com/store/apps/details?id=com.nepalilami&hl=en_US&gl=US&pli=1" target="_blank" rel="noopener noreferrer" aria-label="Get it on Google Play" className="store-badge">
              <img src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png" alt="Get it on Google Play" style={{ height: 76, width: "auto", display: "block", margin: "-12px 0" }} />
            </a>
          </div>
          <div style={{ display: "flex", gap: 24, marginTop: 28, fontSize: 13, color: "var(--muted)" }}>
            <div>★★★★★ <b style={{ color: "var(--ink)" }}>4.8</b> · 2,400 ratings</div>
            <div>Free · iOS 15+ · Android 9+</div>
          </div>
        </div>
        <div style={{ position: "relative" }}>
          <PhoneMock />
          <svg className="ornament-ring" style={{ top: -30, left: -20, width: 140, height: 140, opacity: .4 }} viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="48" fill="none" stroke="#6B1F2A" strokeWidth=".5" strokeDasharray="2 4"/>
          </svg>
        </div>
      </div>
    </section>
  );
}

function PhoneMock() {
  return (
    <div className="phone">
      <div className="phone__notch"></div>
      <div className="phone__screen">
        <div style={{ padding: "60px 20px 20px", height: "100%", display: "flex", flexDirection: "column", gap: 14 }}>
          {/* header */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ fontFamily: "var(--font-serif)", fontSize: 24, color: "var(--ink)" }}>Today</div>
            <div style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--paper)", border: "1px solid var(--line)" }}></div>
          </div>
          <div style={{ fontSize: 12, color: "var(--muted)" }}>3 new matches this morning</div>
          {/* tile 1 */}
          <div style={{
            borderRadius: 18, overflow: "hidden", position: "relative", aspectRatio: "1/1.05",
            background: "linear-gradient(135deg,#E9C2AD,#D9A48B)", boxShadow: "var(--shadow-md)"
          }}>
            <div style={{
              position: "absolute", inset: 0, backgroundImage: "url(https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=600&q=70)",
              backgroundSize: "cover", backgroundPosition: "center", filter: "blur(8px) saturate(90%)"
            }} />
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.6))" }}/>
            <div style={{ position: "absolute", top: 12, left: 12, padding: "4px 8px", background: "rgba(251,247,241,.86)", borderRadius: 999, fontSize: 10, fontWeight: 500 }}>Verified</div>
            <div style={{ position: "absolute", top: 12, right: 12, padding: "4px 8px", background: "rgba(27,22,20,.55)", color: "#F6EFE3", borderRadius: 999, fontSize: 10, display: "flex", alignItems: "center", gap: 4 }}><Icon.Lock size={9}/> Private</div>
            <div style={{ position: "absolute", left: 14, bottom: 12, color: "#F6EFE3" }}>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 18 }}>Mira S., 28</div>
              <div style={{ fontSize: 10.5, opacity: .9, marginTop: 2 }}>Architect · Brooklyn</div>
            </div>
          </div>
          {/* mini row */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            <div style={{ borderRadius: 12, aspectRatio: "1/1", background: "linear-gradient(135deg,#6B1F2A,#3D2E2A)", color: "#F6EFE3", padding: 10, position: "relative" }}>
              <div style={{ fontSize: 9, opacity: .8, letterSpacing: ".06em", textTransform: "uppercase" }}>Sneha R.</div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 13, marginTop: 6 }}>Doctor · London</div>
              <div style={{ position: "absolute", bottom: 8, right: 8, fontSize: 10, color: "var(--gold-2)" }}>92% match</div>
            </div>
            <div style={{ borderRadius: 12, aspectRatio: "1/1", background: "var(--paper)", border: "1px solid var(--line)", padding: 10, color: "var(--ink)" }}>
              <div style={{ fontSize: 9, color: "var(--muted)", letterSpacing: ".06em", textTransform: "uppercase" }}>Aarav T.</div>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 13, marginTop: 6 }}>Engineer · Atlanta</div>
              <div style={{ fontSize: 10, color: "var(--primary)", marginTop: 6 }}>Mutual interest</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Editorial photo break — provenance + wedding photo */
function EditorialBreak() {
  return (
    <section id="story" className="section--tight" style={{ padding: "40px 0" }}>
      <div className="container" style={{ maxWidth: 1360, padding: "0 24px" }}>
        <div
          className="reveal is-in"
          style={{
            position: "relative",
            aspectRatio: "21/9",
            borderRadius: 24,
            overflow: "hidden",
            backgroundImage: "url(https://i0.wp.com/nepalilami.com/wp-content/uploads/2023/06/DSC_0214-scaled.jpg?fit=2000&ssl=1)",
            backgroundSize: "cover",
            backgroundPosition: "center 30%",
            boxShadow: "var(--shadow-lg)",
          }}
        >
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(90deg, rgba(27,22,20,.78) 0%, rgba(27,22,20,.5) 48%, rgba(27,22,20,.1) 80%)",
          }} />
          <div style={{
            position: "absolute", inset: 0,
            display: "flex", alignItems: "center", padding: "0 clamp(32px, 6vw, 88px)",
          }}>
            <div style={{ maxWidth: 600, color: "#F6EFE3" }}>
              <div className="eyebrow" style={{ color: "var(--blush-2)" }}>
                <span className="dot" style={{ background: "var(--gold-2)" }}></span>
                Our story
              </div>
              <h2 style={{
                marginTop: 18,
                color: "#F6EFE3",
                fontSize: "clamp(32px, 3.6vw, 54px)",
                lineHeight: 1.06,
              }}>
                Built as NepaliLami in 2020.<br />
                <span style={{ fontStyle: "italic", color: "var(--blush)" }}>Acquired and reborn</span><br />
                as Lahmee in 2024.
              </h2>
              <p style={{
                marginTop: 22,
                fontSize: 15.5, lineHeight: 1.6,
                color: "rgba(246,239,227,.84)",
                maxWidth: "48ch",
              }}>
                Same families. Same matchmakers. New name, new app. The couples you'll meet on this page first found each other through NepaliLami — and stayed with us on the journey to rebuild as Lahmee. All photos shared with their permission, all rights transferred at the acquisition.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PrivacyDemo, FeatureGrid, HowItWorks, Concierge, EditorialBreak, AppShowcase, SectionHead });