// sections.jsx — All page sections. Type-led, rótulo-broad.

const { useState } = React;

// ─── Eyebrow ─────────────────────────────────────────────────────────────────
const Eyebrow = ({ children, tone = "mustard" }) => (
  <div className={"aor-eyebrow aor-eyebrow-" + tone}>
    <Diamond size={9} color="currentColor" />
    <span>{children}</span>
    <Diamond size={9} color="currentColor" />
  </div>
);

// A massive stacked type block — the page's main expressive device.
// Each line is a `<span className="aor-big">…</span>`; mustard tuck words use
// className="aor-tuck" and sit between big lines.
const TypeStack = ({ lines, align = "center" }) => (
  <div className={"aor-stack aor-stack-" + align}>
    {lines.map((l, i) =>
      l.kind === "tuck" ? (
        <span key={i} className="aor-tuck">{l.text}</span>
      ) : (
        <span key={i} className={"aor-big" + (l.accent ? " aor-big-accent" : "")}>
          {l.text}
        </span>
      )
    )}
  </div>
);

// ─── Nav ─────────────────────────────────────────────────────────────────────
const Nav = () => (
  <nav className="aor-nav">
    <a href="#top" className="aor-logo">
      <div className="aor-logo-mark">
        <span className="aor-logo-word">Apps</span>
        <span className="aor-logo-on">on</span>
        <span className="aor-logo-word">Rails</span>
      </div>
      <Rail width={208} height={9} color="var(--aor-terracotta)" style={{ display: "block", marginTop: 3 }} />
    </a>
    <div className="aor-nav-links">
      <a href="#what-we-do">Specialties</a>
      <a href="#proof">Customers</a>
      <a href="#hello" className="aor-nav-cta">Say hello →</a>
    </div>
  </nav>
);

// ─── Hero ────────────────────────────────────────────────────────────────────
const Hero = ({ asymmetric }) => {
  const align = asymmetric ? "left" : "center";
  return (
    <header className="aor-hero" id="top">
      <div className="aor-hero-sun" aria-hidden="true">
        <Sunburst size={1100} rays={32} color="rgba(248,235,210,0.18)" />
      </div>
      <div className={"aor-hero-inner aor-hero-inner-" + align}>
        <Eyebrow tone="mustard">A Product Engineering Lab</Eyebrow>
        <TypeStack
          align={align}
          lines={[
            { text: "Let's" },
            { kind: "tuck", text: "Make" },
            { text: "AI" },
            { text: "Simple.", accent: true },
          ]}
        />
        <p className="aor-hero-sub">
          Stop Running in Circles and Ship Work that Matters
        </p>
        <div className="aor-hero-ctas">
          <a href="#hello" className="aor-btn aor-btn-primary">
            Talk to us
            <Manicule size={22} color="currentColor" style={{ marginLeft: 10 }} />
          </a>
          <a href="#what-we-do" className="aor-btn aor-btn-ghost-light">
            See what we do
          </a>
        </div>
        <div className="aor-hero-rail">
          <Rail width={asymmetric ? 280 : 360} height={11} color="var(--aor-mustard)" />
        </div>
      </div>
    </header>
  );
};

// ─── Specialties ─────────────────────────────────────────────────────────────
const SPECIALTIES = [
  {
    no: "Nº 01",
    title: "Sovereign AI.",
    sub: "AI deployed where you control the data.",
    body: "We help organizations deploy AI systems inside environments they control, without sending sensitive data to external platforms.",
    tags: ["On-prem", "Self-hosted", "Data residency"],
  },
  {
    no: "Nº 02",
    title: "Open Stack.",
    sub: "Trade vendor lock-in for tools you can shape.",
    body: "We help organizations replace expensive, restrictive, or hard-to-customize proprietary tools with secure, reliable open-source alternatives.",
    tags: ["Migration", "Open-source", "Customization"],
  },
  {
    no: "Nº 03",
    title: "Trained AI.",
    sub: "Trained for your job, owned by you.",
    body: "Small, open-source vision and language models, fine-tuned on your data to solve one problem really well. Cheaper to run, easier to audit, yours to keep.",
    tags: ["Fine-tuning", "Vision", "Language"],
  },
  {
    no: "Nº 04",
    title: "Agent Fleet.",
    sub: "Agents managed across machines and users.",
    body: "When AI agents touch real systems and real people, things go wrong. We design, deploy, and operate fleets of agents, with the controls to keep them in line.",
    tags: ["Orchestration", "Multi-user", "Monitoring"],
  },
];

const Specialties = () => (
  <section id="what-we-do" className="aor-section aor-specialties">
    <div className="aor-section-head">
      <TypeStack
        align="center"
        lines={[
          { text: "What" },
          { text: "We Do.", accent: true },
        ]}
      />
    </div>
    <div className="aor-specialties-grid">
      {SPECIALTIES.map((s) => (
        <article key={s.no} className="aor-spec-card">
          <div className="aor-spec-no">{s.no}</div>
          <h3 className="aor-spec-title">{s.title}</h3>
          <p className="aor-spec-sub">{s.sub}</p>
          <p className="aor-spec-body">{s.body}</p>
          <div className="aor-spec-rail">
            <Rail width={120} height={8} color="var(--aor-terracotta)" />
          </div>
          <ul className="aor-spec-tags">
            {s.tags.map((t) => (
              <li key={t}>{t}</li>
            ))}
          </ul>
        </article>
      ))}
    </div>
  </section>
);

// ─── Customer proof ──────────────────────────────────────────────────────────
const LOGOS = [
  { name: "Bell Canada", caption: "Telecom", style: "serif" },
  { name: "McMaster University", caption: "Research", style: "stencil" },
];

const FauxLogo = ({ name, caption, style }) => {
  const fontMap = {
    serif: { fontFamily: "'DM Serif Display', serif", fontStyle: "italic", fontSize: 38 },
    stencil: { fontFamily: "'DM Serif Display', serif", textTransform: "uppercase", letterSpacing: "0.18em", fontSize: 22 },
  };
  return (
    <div className="aor-logo-cell">
      <div className="aor-logo-name" style={fontMap[style] || {}}>{name}</div>
      {caption && <div className="aor-logo-caption">{caption}</div>}
    </div>
  );
};

const Proof = () => (
  <section id="proof" className="aor-section-bleed aor-proof">
    <div className="aor-section-head aor-section-head-on-dark">
      <Eyebrow tone="mustard">A few of the operators we work with</Eyebrow>
      <TypeStack
        align="center"
        lines={[
          { text: "Trusted" },
          { kind: "tuck", text: "by people who" },
          { text: "Ship.", accent: true },
        ]}
      />
    </div>
    <div className="aor-proof-inner">
      <div className="aor-proof-grid">
        {LOGOS.map((l) => (
          <FauxLogo key={l.name} name={l.name} caption={l.caption} style={l.style} />
        ))}
      </div>
      <div className="aor-proof-quote">
        <div className="aor-quote-mark">"</div>
        <blockquote>
          They helped us build an AI plate reader that records and tracks
          bacterial growth over time, saving us hours of daily lab work.
        </blockquote>
        <div className="aor-quote-attrib">
          <span className="aor-quote-name">Katia Kvitka</span>
          <span className="aor-quote-role">PhD Candidate · McMaster University</span>
        </div>
      </div>
    </div>
  </section>
);

// ─── Crew / About ────────────────────────────────────────────────────────────
const CREW = [
  { name: "Diego Marín", role: "Principal", bio: "Ten years shipping ML in logistics, retail, and factories that still use fax.", initials: "DM", tint: "terracotta" },
  { name: "Hana Petrov", role: "Engineering Lead", bio: "Built the platform side at two startups you've heard of. Believes evals are non-negotiable.", initials: "HP", tint: "teal" },
  { name: "Junior Salas", role: "Strategy", bio: "Ex-McKinsey, ex-recovering. Writes scoping docs that fit on one page.", initials: "JS", tint: "mustard" },
  { name: "Mira Okafor", role: "Operations", bio: "Runs the on-call rotation and the espresso machine. The thing won't ship without her.", initials: "MO", tint: "terracotta" },
];

const PortraitTint = {
  terracotta: { bg: "var(--aor-terracotta)", fg: "var(--aor-cream)" },
  teal: { bg: "var(--aor-teal)", fg: "var(--aor-cream)" },
  mustard: { bg: "var(--aor-mustard)", fg: "var(--aor-ink)" },
};

const Crew = () => (
  <section id="crew" className="aor-section aor-crew">
    <div className="aor-section-head">
      <Eyebrow tone="terracotta">Small team · real shipping</Eyebrow>
      <TypeStack
        align="center"
        lines={[
          { text: "The" },
          { text: "Crew.", accent: true },
        ]}
      />
    </div>
    <div className="aor-crew-story">
      <p>
        We started Apps on Rails after watching too many AI pilots stall in
        the same place, twenty feet from production. Models worked. Demos
        demoed. Nobody wanted to own the unglamorous mile between a notebook
        and a running service.
      </p>
      <p>
        That's the mile we work. Four people in Brooklyn, three engagements at
        a time, and we stay on through go-live.
      </p>
    </div>
    <div className="aor-crew-grid">
      {CREW.map((p) => {
        const t = PortraitTint[p.tint];
        return (
          <article key={p.name} className="aor-crew-card">
            <div className="aor-portrait" style={{ background: t.bg, color: t.fg }}>
              <div className="aor-portrait-sun">
                <Sunburst size={170} rays={20} color="rgba(255,255,255,0.10)" />
              </div>
              <span className="aor-portrait-initials">{p.initials}</span>
            </div>
            <div className="aor-crew-name">{p.name}</div>
            <div className="aor-crew-role">{p.role}</div>
            <p className="aor-crew-bio">{p.bio}</p>
          </article>
        );
      })}
    </div>
  </section>
);

// ─── Contact ─────────────────────────────────────────────────────────────────
const Contact = () => {
  const [form, setForm] = useState({ name: "", company: "", email: "", message: "" });
  const [sent, setSent] = useState(false);
  const onChange = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSent(true);
  };
  return (
    <section id="hello" className="aor-section-bleed aor-contact">
      <div className="aor-section-head aor-section-head-on-dark">
        <Eyebrow tone="mustard">Start a conversation</Eyebrow>
        <TypeStack
          align="center"
          lines={[
            { text: "Say" },
            { text: "Hello.", accent: true },
          ]}
        />
      </div>
      <div className="aor-contact-inner">
        <div className="aor-contact-left">
          <p className="aor-contact-blurb">
            Tell us what you're working on. A stuck pilot, a workflow to
            automate, a copilot idea. We reply within a business day.
          </p>
          <div className="aor-contact-meta">
            <div>
              <div className="aor-contact-meta-label">Email</div>
              <div className="aor-contact-meta-val">hello@appsonrails.com</div>
            </div>
            <div>
              <div className="aor-contact-meta-label">Studio</div>
              <div className="aor-contact-meta-val">Toronto, Ontario</div>
            </div>
            <div>
              <div className="aor-contact-meta-label">Hours</div>
              <div className="aor-contact-meta-val">Mon–Fri · 9–6 ET</div>
            </div>
          </div>
          <div className="aor-contact-stars">
            <Star size={20} color="var(--aor-mustard)" />
            <Star size={28} color="var(--aor-mustard)" />
            <Star size={20} color="var(--aor-mustard)" />
          </div>
        </div>
        <div className="aor-contact-right">
          {sent ? (
            <div className="aor-form-sent">
              <Banner width={300} height={56} color="var(--aor-mustard)" shadow="var(--aor-ink)">
                <span style={{
                  fontFamily: "var(--aor-display-font)",
                  fontSize: 22,
                  color: "var(--aor-ink)",
                  letterSpacing: "0.06em",
                  textTransform: "uppercase",
                }}>
                  Received
                </span>
              </Banner>
              <p className="aor-form-sent-body">
                Thanks, {form.name.split(" ")[0]}. We'll be in touch shortly.
              </p>
            </div>
          ) : (
            <form className="aor-form" onSubmit={onSubmit}>
              <label className="aor-field">
                <span>Your name</span>
                <input type="text" value={form.name} onChange={onChange("name")} placeholder="Jane Doe" required />
              </label>
              <label className="aor-field">
                <span>Company</span>
                <input type="text" value={form.company} onChange={onChange("company")} placeholder="Marlow & Co." />
              </label>
              <label className="aor-field">
                <span>Email</span>
                <input type="email" value={form.email} onChange={onChange("email")} placeholder="jane@marlow.co" required />
              </label>
              <label className="aor-field">
                <span>What are you working on?</span>
                <textarea rows={4} value={form.message} onChange={onChange("message")} placeholder="A stuck pilot, a workflow we'd like to automate, a copilot idea…" />
              </label>
              <button type="submit" className="aor-btn aor-btn-primary aor-btn-block">
                Send it <Manicule size={22} color="currentColor" style={{ marginLeft: 10 }} />
              </button>
              <div className="aor-form-fine">We'll only use this to reply.</div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

// ─── Footer ──────────────────────────────────────────────────────────────────
const Footer = () => (
  <footer className="aor-footer">
    <div className="aor-footer-inner">
      <div className="aor-footer-mark">
        <div className="aor-footer-stack">
          <span className="aor-footer-word">Apps</span>
          <span className="aor-footer-on">on</span>
          <span className="aor-footer-word">Rails.</span>
        </div>
        <Rail width={360} height={12} color="var(--aor-terracotta)" style={{ display: "block", marginTop: 8 }} />
        <span className="aor-footer-tag">Product Engineering Lab · Established 2020 · Toronto, Ontario</span>
      </div>
      <div className="aor-footer-cols">
        <div className="aor-footer-col">
          <div className="aor-footer-col-label">The site</div>
          <a href="#what-we-do">Specialties</a>
          <a href="#proof">Customers</a>
          <a href="#hello">Contact</a>
        </div>
        <div className="aor-footer-col">
          <div className="aor-footer-col-label">Talk</div>
          <a href="mailto:hello@appsonrails.com">hello@appsonrails.com</a>
          <span>Toronto, Ontario</span>
          <span>Mon–Fri · 9–6 ET</span>
        </div>
      </div>
    </div>
    <div className="aor-footer-fine">© 2026 Apps on Rails LLC. Painted by hand on the internet.</div>
  </footer>
);

// Section divider between cream sections
const Divider = () => (
  <div className="aor-divider" aria-hidden="true">
    <span className="aor-divider-line" />
    <Star size={14} color="var(--aor-terracotta)" />
    <Diamond size={8} color="var(--aor-mustard)" />
    <Star size={14} color="var(--aor-terracotta)" />
    <span className="aor-divider-line" />
  </div>
);

Object.assign(window, { Nav, Hero, Specialties, Proof, Crew, Contact, Footer, Divider });