/* ================================================================== */
/*  SECTIONS — Services, About, Tools, Contact, Footer                */
/*  Loaded before app.jsx; components exported to window.             */
/* ================================================================== */
const { useState: useStateS } = React;

/* small macOS file glyph used in Finder rows */
function FileGlyph() {
  return (
    <svg className="frow-file" viewBox="0 0 26 32" fill="none">
      <path d="M3 2 h13 l7 7 v21 a0 0 0 0 1 0 0 H3 Z" fill="#fff" stroke="rgba(10,23,40,.18)" strokeWidth="1.4"/>
      <path d="M16 2 v7 h7" fill="rgba(0,71,204,.12)" stroke="rgba(10,23,40,.18)" strokeWidth="1.4"/>
      <rect x="7" y="16" width="12" height="1.6" rx=".8" fill="var(--cobalt)" opacity=".55"/>
      <rect x="7" y="20" width="9" height="1.6" rx=".8" fill="var(--cobalt)" opacity=".4"/>
    </svg>
  );
}

/* ------------------------------------------------------------------ */
/*  SERVICES — Finder list view, rows expand into a work flow         */
/* ------------------------------------------------------------------ */
const SERVICES = [
  {
    n: "01", name: "Website Design & Redesign",
    desc: "Conversion-focused sites that ship in weeks, not months.",
    total: "~3 weeks, end to end",
    steps: [
      { name: "Discovery & Audit", dur: "2 days", desc: "Goals, audience, competitor teardown and a full content inventory." },
      { name: "Wireframes & UX", dur: "3 days", desc: "Sitemap and low-fidelity flows for every key page before any pixels." },
      { name: "Visual Design", dur: "5 days", desc: "Hi-fi mockups in your brand, with responsive states for mobile and desktop." },
      { name: "Build & QA", dur: "5 days", desc: "Development, motion, and cross-device testing until it's pixel-tight." },
      { name: "Launch", dur: "1 day", desc: "Deploy, wire up analytics, and hand over docs you can run with." },
    ],
  },
  {
    n: "02", name: "SEO",
    desc: "Technical + content SEO that compounds into inbound demand.",
    total: "First results in 4–6 weeks, then ongoing",
    steps: [
      { name: "Technical Audit", dur: "3 days", desc: "Crawl, Core Web Vitals, indexation and a prioritized fix list." },
      { name: "Keyword Strategy", dur: "2 days", desc: "Intent mapping and a target list ranked by reachable opportunity." },
      { name: "On-Page", dur: "1 week", desc: "Titles, structure, internal links and schema across the site." },
      { name: "Content Engine", dur: "Ongoing", desc: "Briefs and a publishing cadence that builds topical authority." },
      { name: "Reporting", dur: "Monthly", desc: "Rankings, traffic and a clear recommendation for the next bet." },
    ],
  },
  {
    n: "03", name: "Branding",
    desc: "Identity, voice and a kit your team can run with.",
    total: "~2 weeks to a full kit",
    steps: [
      { name: "Brand Discovery", dur: "2 days", desc: "Positioning, values, audience and the tone that sets you apart." },
      { name: "Identity Concepts", dur: "4 days", desc: "Logo, type and color directions to react to — not just one safe bet." },
      { name: "Refinement", dur: "3 days", desc: "Pick a direction and polish every detail to final." },
      { name: "Brand Kit", dur: "2 days", desc: "Guidelines, assets and templates so the brand ships without me." },
    ],
  },
  {
    n: "04", name: "Product Launch",
    desc: "End-to-end go-to-market — positioning, assets, momentum.",
    total: "~3–4 weeks to launch day",
    steps: [
      { name: "Positioning", dur: "3 days", desc: "Message, narrative and the hooks that land with your ICP." },
      { name: "Asset Production", dur: "1 week", desc: "Landing page, deck, launch video and social creative." },
      { name: "Channel Setup", dur: "3 days", desc: "Email, paid, PR and community primed and scheduled." },
      { name: "Launch Day", dur: "1 day", desc: "A coordinated go-live across every channel at once." },
      { name: "Post-Launch", dur: "1 week", desc: "Read the data, cut what's flat, double down on what works." },
    ],
  },
  {
    n: "05", name: "Social Media",
    desc: "An AI-assisted content engine for a daily cadence.",
    total: "1 week to set up, then ongoing",
    steps: [
      { name: "Audit & Strategy", dur: "2 days", desc: "Channels, voice and the content pillars worth showing up for." },
      { name: "System Setup", dur: "3 days", desc: "An AI-assisted pipeline and templates that keep quality high." },
      { name: "Content Calendar", dur: "2 days", desc: "A month mapped, written and ready to schedule." },
      { name: "Production", dur: "Ongoing", desc: "A daily cadence delivered without needing a big team." },
      { name: "Optimize", dur: "Monthly", desc: "Lean into the formats and topics that actually perform." },
    ],
  },
];

function ClockIcon() {
  return <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth="1.4"/><path d="M7 4 V7 L9 8.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}

function Services() {
  const [open, setOpen] = useStateS(null);
  return (
    <section id="services" className="sec">
      <div className="sec-inner">
        <span className="kicker">/ Services</span>
        <h2 className="sec-h">Ways to work with me</h2>
        <p className="sec-sub">Five files in one folder. Click any service to open its flow of work — and how long it takes.</p>

        <div className="panel" style={{ marginTop: 40 }}>
          <div className="titlebar" style={{ cursor: "default" }}>
            <div className="lights"><span className="light red" /><span className="light yellow" /><span className="light green" /></div>
            <span className="win-title">Services — Finder</span>
          </div>
          <div className="finder">
            <aside className="finder-side" aria-hidden="true">
              <div className="side-group">Favorites</div>
              <div className="side-item on"><span className="side-dot" />Services</div>
              <div className="side-item"><span className="side-dot" style={{ background: "#febc2e" }} />Work</div>
              <div className="side-item"><span className="side-dot" style={{ background: "#28c840" }} />About</div>
              <div className="side-group">Tags</div>
              <div className="side-item"><span className="side-dot" style={{ background: "#0A84FF" }} />AI-First</div>
              <div className="side-item"><span className="side-dot" style={{ background: "#ff5f57" }} />Fast</div>
            </aside>
            <div className="finder-main">
              <div className="finder-head"><span>#</span><span>Name</span><span /></div>
              {SERVICES.map((s, i) => {
                const isOpen = open === i;
                return (
                  <div className={"frow-wrap" + (isOpen ? " open" : "")} key={s.n}>
                    <div className={"frow" + (isOpen ? " open" : "")} role="button" tabIndex={0} aria-expanded={isOpen}
                      onClick={() => setOpen(isOpen ? null : i)}
                      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen(isOpen ? null : i); } }}>
                      <span className="frow-idx">{s.n}</span>
                      <div>
                        <div className="frow-name"><FileGlyph />{s.name}</div>
                        <div className="frow-desc">{s.desc}</div>
                      </div>
                      <span className="frow-chev" aria-hidden="true">
                        <svg width="11" height="11" viewBox="0 0 11 11"><path d="M3.5 1.5 L7.5 5.5 L3.5 9.5" stroke="currentColor" strokeWidth="1.7" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
                      </span>
                    </div>
                    <div className="flow">
                      <div className="flow-inner">
                        <div className="flow-pad">
                          <div className="flow-timeline"><ClockIcon />{s.total}</div>
                          <div className="steps">
                            {s.steps.map((st) => (
                              <div className="step" key={st.name}>
                                <div className="step-top">
                                  <span className="step-name">{st.name}</span>
                                  <span className="step-dur">{st.dur}</span>
                                </div>
                                <p className="step-desc">{st.desc}</p>
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  ABOUT — Who Am I? editorial window                                 */
/* ------------------------------------------------------------------ */
function About() {
  return (
    <section id="about" className="sec">
      <div className="sec-inner">
        <span className="kicker">/ About</span>
        <h2 className="sec-h">Who am I?</h2>

        <div className="panel" style={{ marginTop: 40, position: "relative" }}>
          <img className="folder-icon float-folder" src="assets/folders/calmform.png" alt="" style={{ top: -26, right: 40 }} />
          <div className="titlebar" style={{ cursor: "default" }}>
            <div className="lights"><span className="light red" /><span className="light yellow" /><span className="light green" /></div>
            <span className="win-title">who-am-i.app</span>
          </div>
          <div className="about-grid">
            <div className="about-photo">
              <img src="uploads/madina.jpg" alt="Madina" style={{ position:"absolute", inset:0, width:"100%", height:"100%", objectFit:"cover" }} />
              <div className="about-photo-overlay">Madina</div>
            </div>
            <div className="about-body">
              <span className="kicker">Founder · Hong Kong</span>
              <h3>Growth &amp; partnerships strategist — and builder.</h3>
              <p>I'm Madina — based in Hong Kong, originally from Tajikistan. I help B2B tech founders position, launch and grow without waiting on a big agency timeline.</p>
              <p className="about-quote">"Great marketing shouldn't take a month to start working."</p>
              <p>I pair strategy with AI-assisted execution, so the work starts compounding in days. End-to-end, hands-on, fast.</p>
              <div className="chips">
                <span className="chip"><b>5+</b> Services</span>
                <span className="chip"><b>AI-First</b> Workflow</span>
                <span className="chip"><b>Startup</b> Speed</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  TOOLS — Launchpad grid with official logos                         */
/* ------------------------------------------------------------------ */
const fav = (domain) => `https://www.google.com/s2/favicons?domain=${domain}&sz=128`;
const TOOLS = [
  { name: "Claude",      logo: fav("claude.ai"),         mono: "C", bg: "linear-gradient(135deg,#d97757,#c2410c)" },
  { name: "ChatGPT",     logo: fav("chatgpt.com"),        mono: "G", bg: "linear-gradient(135deg,#10a37f,#0d8a6c)" },
  { name: "Gemini",      logo: fav("gemini.google.com"),  mono: "G", bg: "linear-gradient(135deg,#4f8ff7,#9b72f0)" },
  { name: "Higgsfield",  logo: fav("higgsfield.ai"),      mono: "H", bg: "linear-gradient(135deg,#7c3aed,#4c1d95)" },
  { name: "Kling AI",    logo: fav("klingai.com"),        mono: "K", bg: "linear-gradient(135deg,#1a1a2e,#16213e)" },
  { name: "Midjourney",  logo: fav("midjourney.com"),     mono: "M", bg: "linear-gradient(135deg,#1f2430,#0a0d14)" },
  { name: "Imagine Art", logo: fav("imagine.art"),        mono: "I", bg: "linear-gradient(135deg,#f59e0b,#d97706)" },
  { name: "fal.ai",      logo: fav("fal.ai"),             mono: "f", bg: "linear-gradient(135deg,#6366f1,#4338ca)" },
  { name: "ElevenLabs",  logo: fav("elevenlabs.io"),      mono: "E", bg: "linear-gradient(135deg,#111,#333)" },
  { name: "Figma",       logo: fav("figma.com"),          mono: "F", bg: "linear-gradient(135deg,#f24e1e,#a259ff)" },
  { name: "Framer",      logo: fav("framer.com"),         mono: "F", bg: "linear-gradient(135deg,#1c1c1c,#3a3a3a)" },
  { name: "Vercel",      logo: fav("vercel.com"),         mono: "V", bg: "linear-gradient(135deg,#111,#333)" },
  { name: "n8n",         logo: fav("n8n.io"),             mono: "n", bg: "linear-gradient(135deg,#ea4b71,#c4304a)" },
  { name: "Notion",      logo: fav("notion.so"),          mono: "N", bg: "linear-gradient(135deg,#2f2f2f,#0d0d0d)" },
  { name: "HubSpot",     logo: fav("hubspot.com"),        mono: "H", bg: "linear-gradient(135deg,#ff7a59,#e8512f)" },
  { name: "Shopify",     logo: fav("shopify.com"),        mono: "S", bg: "linear-gradient(135deg,#96bf48,#5e8e3e)" },
];

function AppIcon({ t }) {
  const [err, setErr] = useStateS(false);
  if (err) return <div className="app-icon" style={{ background: t.bg }}>{t.mono}</div>;
  return (
    <div className="app-icon light">
      <img src={t.logo} alt={t.name + " logo"} loading="lazy" onError={() => setErr(true)} />
    </div>
  );
}

function Tools() {
  return (
    <section id="tools" className="sec">
      <div className="sec-inner">
        <span className="kicker">/ Tools</span>
        <h2 className="sec-h">Built on the best</h2>
        <p className="sec-sub">Fast tools for fast teams. The stack behind every launch.</p>

        <div className="launch-grid">
          {TOOLS.map((t) => (
            <div className="app" key={t.name}>
              <AppIcon t={t} />
              <span className="app-label">{t.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  CONTACT — authentic iOS AirDrop sheet                              */
/* ------------------------------------------------------------------ */
const W3F_KEY = "32faa223-ce90-4e16-8819-f65914761f93";

function Contact() {
  const [status, setStatus] = useStateS(null); // null | "sending" | "sent" | "error"
  const emailRef = React.useRef(null);
  const msgRef   = React.useRef(null);

  async function handleSend() {
    const email = emailRef.current?.value?.trim();
    const msg   = msgRef.current?.value?.trim();
    if (!email || !msg) return;
    setStatus("sending");
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          access_key: W3F_KEY,
          subject: "New project inquiry — Blue Dragon site",
          from_name: email,
          email: email,
          message: msg,
        }),
      });
      const data = await res.json();
      setStatus(data.success ? "sent" : "error");
    } catch {
      setStatus("error");
    }
  }

  return (
    <section id="contact" className="sec">
      <div className="sec-inner">
        <span className="kicker">/ Contact</span>
        <h2 className="sec-h">Start a project</h2>
        <p className="sec-sub">Send it over like you'd AirDrop a file. I'll reply within a day.</p>

        <div className="share-card">
          <div className="share-card-pad">
            <h3 className="share-card-title">AirDrop</h3>
            <p className="share-card-sub">Madina (Blue Dragon) would like to share<br /><b>1 project brief</b>.</p>
            <div className="share-card-preview">
              <div className="share-card-strip" />
              <img className="share-card-photo" src="assets/cat.webp" alt="Shared preview" loading="lazy" />
            </div>
          </div>
          <div className="share-card-actions">
            <button onClick={() => {}}>Decline</button>
            <button style={{ fontWeight: 600 }} onClick={() => emailRef.current?.focus()}>Accept</button>
          </div>
        </div>

        <div className="contact-extra">
          {status === "sent" ? (
            <p className="contact-meta" style={{ color: "#fff", fontSize: 16, fontWeight: 600 }}>
              Sent ✓ — I'll be in touch within 24 hours.
            </p>
          ) : (
            <>
              <div className="contact-field" style={{ marginBottom: 10 }}>
                <input ref={emailRef} type="email" placeholder="Your email address" disabled={status === "sending"}
                  onKeyDown={(e) => { if (e.key === "Enter") msgRef.current?.focus(); }} />
              </div>
              <div className="contact-field">
                <input ref={msgRef} placeholder="Tell me about your project…" disabled={status === "sending"}
                  onKeyDown={(e) => { if (e.key === "Enter") handleSend(); }} />
                <button className="contact-send" aria-label="Send" onClick={handleSend} disabled={status === "sending"}>
                  <svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 13 V3 M8 3 L4 7 M8 3 L12 7" stroke="#fff" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </button>
              </div>
              {status === "error" && <p style={{ color: "#ff5f57", fontSize: 13, marginTop: 8 }}>Something went wrong — try again.</p>}
            </>
          )}
          <p className="contact-meta" style={{ color: "#fff" }}>
            Based in Hong Kong · Response within 24 hours
          </p>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------------ */
/*  FOOTER                                                             */
/* ------------------------------------------------------------------ */
function Footer() {
  const go = (id) => { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 30, behavior: REDUCED ? "auto" : "smooth" }); };
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div className="footer-logo">
            Blue Dragon Marketing
          </div>
          <nav className="footer-nav">
            {[["Work", "work"], ["Services", "services"], ["About", "about"], ["Tools", "tools"], ["Contact", "contact"]].map(([l, id]) => (
              <button key={id} onClick={() => go(id)}>{l}</button>
            ))}
          </nav>
        </div>
        <div className="footer-rule" />
        <div className="footer-bot">
          <span className="footer-copy">© 2026 Blue Dragon Marketing. Hong Kong — Built with AI. Delivered fast.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Services, About, Tools, Contact, Footer });