/* global React, UI */
const { Avatar, IconBack, IconChevron, IconArrow, IconPin, IconSparkle } = window.UI;

function MeetSheetScreen({ go, onRequest }) {
  return (
    <div className="screen page-in">
      {/* HERO */}
      <div style={{ position: "relative" }}>
        <div style={{ position: "absolute", top: 8, left: 16, right: 16, display: "flex", justifyContent: "space-between", zIndex: 2 }}>
          <button className="icon-btn" onClick={() => go("home")} style={{ background: "rgba(14,13,11,0.5)", backdropFilter: "blur(20px)", borderColor: "rgba(245,241,234,0.18)", color: "var(--text)" }}><IconBack/></button>
          <button className="icon-btn" style={{ background: "rgba(14,13,11,0.5)", backdropFilter: "blur(20px)", borderColor: "rgba(245,241,234,0.18)", color: "var(--text)" }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M4 12h16M4 6h16M4 18h16"/></svg>
          </button>
        </div>

        {/* Magazine-cover layout — typographic-led, photo as one element among many */}
        <div style={{ width: "100%", aspectRatio: "1/1.18", position: "relative", overflow: "hidden", background: "linear-gradient(180deg, oklch(0.32 0.02 250), oklch(0.20 0.02 250))" }}>
          {/* subtle paper grain */}
          <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.18, mixBlendMode: "overlay" }}>
            <defs>
              <radialGradient id="ms-light" cx="28%" cy="22%" r="80%">
                <stop offset="0" stopColor="oklch(0.55 0.02 250)" />
                <stop offset="1" stopColor="oklch(0.18 0.02 250)" stopOpacity="0" />
              </radialGradient>
            </defs>
            <rect width="100" height="100" fill="url(#ms-light)"/>
          </svg>

          {/* Mono passport codes — top right */}
          <div style={{ position: "absolute", top: 64, right: 22, color: "rgba(245,241,234,0.55)", textAlign: "right" }}>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em" }}>MEET SHEET</div>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", marginTop: 2 }}>№ 0247</div>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", marginTop: 12 }}>ROBINA · QLD · AU</div>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", marginTop: 2 }}>EST. 2026</div>
          </div>

          {/* Mono cover-line — top left */}
          <div style={{ position: "absolute", top: 64, left: 24, color: "rgba(245,241,234,0.55)" }}>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em" }}>VOL. I</div>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.14em", marginTop: 2 }}>FEAT.</div>
          </div>

          {/* Portrait — 140×140 rounded square, upper portion */}
          <div style={{ position: "absolute", top: 110, left: 24, width: 140, height: 140, borderRadius: 12, overflow: "hidden", border: "1px solid rgba(245,241,234,0.18)", background: "oklch(0.30 0.015 250)" }}>
            <svg viewBox="0 0 100 100" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: "block" }}>
              <defs>
                <radialGradient id="ms-portrait" cx="40%" cy="35%" r="65%">
                  <stop offset="0" stopColor="oklch(0.50 0.025 250)" />
                  <stop offset="1" stopColor="oklch(0.20 0.02 250)" />
                </radialGradient>
              </defs>
              <rect width="100" height="100" fill="url(#ms-portrait)"/>
              {/* Stylised portrait silhouette */}
              <circle cx="50" cy="38" r="14" fill="rgba(245,241,234,0.28)"/>
              <ellipse cx="50" cy="84" rx="28" ry="26" fill="rgba(245,241,234,0.22)"/>
            </svg>
          </div>

          {/* Tiny rule between portrait and name */}
          <div style={{ position: "absolute", top: 268, left: 24, width: 32, height: 1, background: "rgba(245,241,234,0.25)" }}/>

          {/* Name — magazine-cover typography */}
          <div style={{ position: "absolute", top: 282, left: 24, right: 24 }}>
            <div className="serif" style={{ fontSize: 56, lineHeight: 0.92, color: "var(--text)", letterSpacing: "-0.025em" }}>
              Marcus<br/><span className="serif-i" style={{ color: "var(--accent)" }}>Chen.</span>
            </div>
          </div>

          {/* Headline + business — bottom */}
          <div style={{ position: "absolute", bottom: 32, left: 24, right: 24 }}>
            <div style={{ height: 1, width: 40, background: "var(--accent)", opacity: 0.8, marginBottom: 14 }}/>
            <div style={{ color: "var(--text)", fontSize: 14.5, fontWeight: 500 }}>
              Commercial property solicitor
            </div>
            <div style={{ color: "var(--text-3)", fontSize: 12.5, marginTop: 4 }}>
              Chen Legal · Robina, QLD
            </div>
          </div>

          {/* Gradient fade to bg */}
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 70%, var(--bg) 100%)", pointerEvents: "none" }}/>
        </div>
      </div>

      {/* STAT STRIP */}
      <div className="screen-pad">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", padding: "20px 0", borderBottom: "1px solid var(--border-soft)" }}>
          <SStat n="47" l="1to1s"/>
          <SStat n="38" l="Reach" b/>
          <SStat n="14" l="Connections" b/>
          <SStat n="4.8" l="Quality" b/>
        </div>

        {/* NOW (90-day goal pull-quote) */}
        <div style={{ padding: "32px 0 28px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Now · 90-day focus</div>
          <div className="pullquote">
            “Building referral relationships with brokers and accountants who serve <span style={{ color: "var(--accent)" }}>SME owners buying their first commercial premises.</span>”
          </div>
        </div>

        <div className="perf"></div>

        {/* WHAT I DO */}
        <Section title="What I do">
          <p style={{ margin: 0, lineHeight: 1.6 }}>
            Boutique commercial property practice. I act for small business owners purchasing
            first commercial premises and developers under $5M — the deals top-tier firms
            deprioritise but where the legal work most affects the outcome.
          </p>
          <p style={{ margin: "14px 0 0", lineHeight: 1.6, color: "var(--text-2)" }}>
            8 years post-admission. Recently left Allens to go solo.
          </p>
        </Section>

        {/* WHO I SERVE */}
        <Section title="Who I serve">
          <Archetype
            n="01"
            t="The first-time commercial buyer"
            d="Business owner outgrowing leased premises, $1.5–4M deal, often nervous about contract terms."
          />
          <Archetype
            n="02"
            t="The under-$5M developer"
            d="Two to ten lot subdivisions, mixed-use infill, time-pressured DA pathways."
          />
          <Archetype
            n="03"
            t="The accidental landlord"
            d="Owner-occupiers selling the business but keeping the building, suddenly a commercial lessor."
          />
        </Section>

        {/* RECENT WINS */}
        <Section title="Recent wins">
          <Win
            tag="MARCH 2026"
            t="Saved a $2.3M warehouse purchase"
            d="Identified an unregistered easement four days before settlement; restructured the deal to protect future expansion."
          />
          <Win
            tag="JANUARY 2026"
            t="Closed a 14-lot Burleigh subdivision"
            d="DA-conditional contracts with three separate funders. Settlement-to-construction in 11 weeks."
          />
          <Win
            tag="NOVEMBER 2025"
            t="First contract template for a SaaS founder"
            d="Helped a software founder buy their first office. Now their go-to for property and commercial."
          />
        </Section>

        {/* LOOKING TO MEET */}
        <Section title="Looking to meet">
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            <span className="pill accent">Commercial mortgage brokers</span>
            <span className="pill accent">SME accountants</span>
            <span className="pill accent">Commercial agents · Gold Coast</span>
            <span className="pill">Town planners · Robina/Varsity</span>
            <span className="pill">QS / building consultants</span>
          </div>
        </Section>

        {/* WHAT I CAN OFFER */}
        <Section title="What I can offer">
          <Offer t="Free 20-min contract reviews" d="For early-stage business owners deciding whether a commercial purchase makes sense." />
          <Offer t="Intros to ~12 SE QLD brokers" d="Mostly relationship-based, no kickbacks. I'll only intro if it fits." />
          <Offer t="Plain-English explainers" d="Will write a one-pager on any commercial property question your client has." />
        </Section>

        {/* GROUPS */}
        <Section title="Groups">
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            <span className="pill" style={{ paddingLeft: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: "var(--accent)" }}/>
              BNI Robina Chapter
            </span>
            <span className="pill" style={{ paddingLeft: 8 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: "#7FA068" }}/>
              Coast Legal Mastermind
            </span>
          </div>
        </Section>

        <div style={{ height: 100 }}/>
      </div>

      {/* STICKY CTA */}
      <div className="sticky-cta">
        <button className="btn btn-primary btn-block" onClick={onRequest}>Request a 1to1</button>
      </div>
    </div>
  );
}

const SStat = ({ n, l, b }) => (
  <div style={{ textAlign: "center", borderLeft: b ? "1px solid var(--border-soft)" : "none" }}>
    <div className="stat-num" style={{ fontSize: 22 }}>{n}</div>
    <div className="stat-label">{l}</div>
  </div>
);

function Section({ title, children }) {
  return (
    <div style={{ padding: "28px 0" }}>
      <h3 className="section-h">{title}</h3>
      {children}
    </div>
  );
}

function Archetype({ n, t, d }) {
  return (
    <div style={{ padding: "16px 0", borderTop: "1px solid var(--border-soft)" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
        <span className="mono" style={{ color: "var(--text-3)", fontSize: 11 }}>{n}</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 500, fontSize: 15 }}>{t}</div>
          <div className="muted" style={{ fontSize: 14, lineHeight: 1.55, marginTop: 4 }}>{d}</div>
        </div>
      </div>
    </div>
  );
}

function Win({ tag, t, d }) {
  return (
    <div style={{ padding: "16px 0", borderTop: "1px solid var(--border-soft)" }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--text-3)" }}>{tag}</div>
      <div style={{ fontWeight: 500, fontSize: 15, marginTop: 6 }}>{t}</div>
      <div className="muted" style={{ fontSize: 14, lineHeight: 1.55, marginTop: 4 }}>{d}</div>
    </div>
  );
}

function Offer({ t, d }) {
  return (
    <div style={{ padding: "14px 0", borderTop: "1px solid var(--border-soft)", display: "flex", gap: 12, alignItems: "flex-start" }}>
      <div style={{ width: 6, height: 6, borderRadius: 3, background: "var(--accent)", marginTop: 9 }}/>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 500, fontSize: 15 }}>{t}</div>
        <div className="muted" style={{ fontSize: 14, lineHeight: 1.55, marginTop: 2 }}>{d}</div>
      </div>
    </div>
  );
}

window.MeetSheetScreen = MeetSheetScreen;