// Legal page — shared layout for Privacy + Terms.
// Sober, readable, on-brand. Long-form prose styled with editorial care.

const Legal = ({ kind }) => {
  const docs = {
    privacy: {
      title: 'Privacy',
      titleEm: 'Policy.',
      eyebrow: 'Legal · Privacy',
      updated: 'Updated April 14, 2026',
      intro: "We collect the smallest amount of information we can to do good work, and we treat what we hold like it belongs to you — because it does. This page explains what we collect, why, and what you can ask us to do about it.",
      sections: [
        {
          n: '01',
          h: 'Who we are',
          body: [
            "Leviyet (\"we,\" \"us,\" \"our\") is an AI consultancy. When you reach out through this site, hire us, or use a tool we've built for you, this policy describes how we handle your information.",
            "Questions about anything below can go to hello@leviyet.com — a real person reads it.",
          ],
        },
        {
          n: '02',
          h: 'What we collect',
          body: ["We try to keep this list short. In practice it falls into three buckets:"],
          list: [
            ["Things you give us.", "Your name, email, company, and whatever context you share when you fill out a form, book a call, or email us."],
            ["Things your browser sends.", "Standard server logs — IP address, page viewed, referring page, browser type, timestamps. We use these to keep the site working and secure."],
            ["Engagement signals.", "If we send you an email, we may know you opened it. If you visit our site, we use a privacy-respecting analytics tool to count pageviews. We do not use third-party advertising trackers."],
          ],
        },
        {
          n: '03',
          h: 'How we use it',
          body: ["Plainly: to talk to you, to do the work you hired us for, and to improve the way we run our business. Specifically:"],
          list: [
            ["To respond.", "If you contact us, we use your information to reply and follow up."],
            ["To deliver.", "When you're a client, we use what you share to scope, build, and support the work."],
            ["To improve.", "Aggregated, de-identified analytics help us understand which pages are useful and which aren't."],
            ["To stay legal.", "We keep records as required by tax, accounting, and contract law."],
          ],
        },
        {
          n: '04',
          h: 'How AI fits in',
          body: [
            "We build with AI, so it's worth being explicit. When we run an audit or build an agent for you, we work with your data inside services you approve in writing — typically OpenAI, Anthropic, or a private deployment in your own cloud. We do not use your data to train public models, and we ask our subprocessors for the same.",
            "If you use a tool we've built, the tool's specific data handling is described in your engagement agreement. Always read that document — it overrides anything general we say here.",
          ],
        },
        {
          n: '05',
          h: 'Who we share with',
          body: ["Almost no one. We share information only with:"],
          list: [
            ["Service providers we rely on.", "Email (Google Workspace), accounting (Xero), payments (Stripe), site hosting (Vercel), analytics (Plausible). All bound by their own data agreements."],
            ["AI infrastructure providers.", "Named in your engagement agreement, never beyond that scope."],
            ["Legal requests.", "If we receive a valid subpoena or court order. We will tell you unless legally barred from doing so."],
          ],
          tail: "We do not sell your data. We never have. We're not going to.",
        },
        {
          n: '06',
          h: 'How long we keep things',
          body: [
            "Inquiries: up to 24 months after the last contact, then deleted unless you've become a client.",
            "Client records: for the length of our engagement plus 7 years, to satisfy tax and contract obligations.",
            "Marketing emails: until you unsubscribe (one click, every email).",
          ],
        },
        {
          n: '07',
          h: 'Your rights',
          body: ["You can ask us, at any time, to:"],
          list: [
            ["See", "what we have about you."],
            ["Correct", "anything that's wrong."],
            ["Delete", "what we hold (within the limits of our legal obligations)."],
            ["Export", "your data in a portable format."],
            ["Opt out", "of marketing, while keeping service emails about active work."],
          ],
          tail: "Email hello@leviyet.com with the word \"data\" in the subject line. We'll respond within 14 days.",
        },
        {
          n: '08',
          h: 'Cookies',
          body: [
            "We use a single first-party cookie for session continuity. Our analytics tool (Plausible) does not use cookies and does not track you across sites. We do not run advertising pixels.",
          ],
        },
        {
          n: '09',
          h: 'Where your data lives',
          body: [
            "Our primary services are based in the United States. If you're contacting us from the EU/UK, your data may be transferred to the US under Standard Contractual Clauses, and you retain all rights described in this policy.",
          ],
        },
        {
          n: '10',
          h: 'Changes',
          body: [
            "If we make a meaningful change to this policy, we'll update the date at the top and, if you're a client, send you a note. Cosmetic changes may happen quietly.",
          ],
        },
      ],
    },
    terms: {
      title: 'Terms of',
      titleEm: 'Service.',
      eyebrow: 'Legal · Terms',
      updated: 'Updated April 14, 2026',
      intro: "These terms govern your use of leviyet.com and any free resources we publish here. Paid engagements are governed by a separate signed agreement, which always takes precedence.",
      sections: [
        {
          n: '01',
          h: 'Using this site',
          body: [
            "You're welcome to read, link to, and quote anything published here for non-commercial purposes, with attribution. Don't crawl us aggressively, don't scrape us to train a model, and don't try to break things.",
            "If you find a security issue, please email hello@leviyet.com. We'll thank you in writing.",
          ],
        },
        {
          n: '02',
          h: 'Free tools and resources',
          body: [
            "Things on this site labeled \"free\" — calculators, guides, the AI quiz — are provided as-is. They're meant to be useful, but they aren't a substitute for tailored advice. If you make a meaningful business decision based on them, talk to us first.",
          ],
        },
        {
          n: '03',
          h: 'Inquiries are not engagements',
          body: [
            "Filling out a form, booking an intro call, or having a conversation with us does not create a contract or a confidentiality obligation on either side. We become engaged only when both parties sign a written agreement that spells out scope, fees, and confidentiality.",
            "That said, we'll always treat what you share with discretion. We just don't want anyone to be surprised by what's enforceable and what isn't.",
          ],
        },
        {
          n: '04',
          h: 'Engagements',
          body: ["When we work together, your project is governed by a Master Services Agreement (MSA) and one or more Statements of Work (SOWs). The most important parts:"],
          list: [
            ["Scope.", "Each SOW lists what we'll deliver, the timeline, and what we need from you."],
            ["Fees.", "Fees and payment terms are stated in the SOW. We bill in arrears unless agreed otherwise."],
            ["IP.", "You own the work product we deliver. We retain rights to the methodologies, frameworks, and tools we used to build it. We may reference the engagement at a high level for marketing, but only with your written approval for anything specific."],
            ["Confidentiality.", "Mutual. Standard. Survives the engagement."],
            ["Termination.", "Either party may terminate with 14 days' written notice. You pay for work performed up to that date."],
          ],
        },
        {
          n: '05',
          h: 'AI-generated outputs',
          body: [
            "Modern AI systems are powerful and imperfect. When we build a tool that produces content, summaries, recommendations, or decisions, you remain responsible for reviewing those outputs before acting on them — particularly anything that affects a customer, a regulator, or a financial outcome.",
            "We'll help you build the right review processes. We won't promise that any AI system is error-free, because that promise has never been honestly made by anyone.",
          ],
        },
        {
          n: '06',
          h: 'Warranties',
          body: [
            "We warrant that the services we provide will be performed with the diligence and skill reasonably expected of a competent consultancy. We do not warrant that any system we build will be uninterrupted, error-free, or that any forecast we share will come true. The world changes faster than any model.",
          ],
        },
        {
          n: '07',
          h: 'Limitation of liability',
          body: [
            "To the maximum extent allowed by law, our total liability for any engagement is capped at the fees you have paid us under that engagement during the 12 months preceding the claim. Neither party is liable for indirect, incidental, or consequential damages.",
            "These limits do not apply to fraud, willful misconduct, or breaches of confidentiality.",
          ],
        },
        {
          n: '08',
          h: 'Governing law',
          body: [
            "These terms are governed by the laws of the State of Delaware, USA, without regard to conflict-of-laws rules. Any dispute will be resolved in the state or federal courts located in Wilmington, Delaware. If you'd prefer a different forum, raise it in your MSA — we're reasonable people.",
          ],
        },
        {
          n: '09',
          h: 'Changes to these terms',
          body: [
            "We may update these terms from time to time. The version on this page is the current one. Material changes will be flagged with a new \"updated\" date at the top.",
          ],
        },
        {
          n: '10',
          h: 'Contact',
          body: [
            "Questions, complaints, compliments: hello@leviyet.com. We answer within two business days.",
          ],
        },
      ],
    },
  };

  const doc = docs[kind];

  const css = `
    .lg-h1 { font-family: 'Instrument Serif', serif; font-size: 124px; line-height: 0.95; letter-spacing: -0.025em; font-weight: 400; margin: 0 0 36px; max-width: 1280px; }
    .lg-h1 em { color: #c8542a; font-style: italic; }
    .lg-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6b5d4d; margin-top: 28px; display: flex; gap: 28px; flex-wrap: wrap; }
    .lg-meta a { color: #c8542a; }
    .lg-meta a:hover { text-decoration: underline; }

    .lg-body { padding: 32px 56px 0; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 80px; align-items: start; }
    .lg-toc { position: sticky; top: 110px; align-self: start; padding-top: 4px; }
    .lg-toc-h { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b5d4d; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 18px; }
    .lg-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: item; }
    .lg-toc li { display: flex; gap: 14px; padding: 8px 0; border-top: 1px dashed rgba(26,22,18,0.15); align-items: baseline; }
    .lg-toc li:first-child { border-top: 0; padding-top: 0; }
    .lg-toc a { color: #4a3f33; font-size: 14px; transition: color 0.2s; }
    .lg-toc a:hover { color: #c8542a; }
    .lg-toc-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c8542a; min-width: 22px; }

    .lg-content { max-width: 760px; }
    .lg-intro { font-family: 'Instrument Serif', serif; font-size: 30px; line-height: 1.3; letter-spacing: -0.015em; color: #1a1612; margin: 0 0 64px; padding-bottom: 48px; border-bottom: 1px solid rgba(26,22,18,0.12); font-style: italic; }

    .lg-sec { padding: 0 0 56px; scroll-margin-top: 100px; }
    .lg-sec-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c8542a; letter-spacing: 0.15em; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; }
    .lg-sec-num-line { width: 24px; height: 1px; background: #c8542a; }
    .lg-sec-h { font-family: 'Instrument Serif', serif; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 400; margin: 0 0 24px; }
    .lg-sec p { font-size: 17px; line-height: 1.65; color: #4a3f33; margin: 0 0 18px; text-wrap: pretty; }
    .lg-sec dl { margin: 18px 0 0; padding: 0; }
    .lg-sec dl > div { padding: 16px 0; border-top: 1px dashed rgba(26,22,18,0.18); display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: baseline; }
    .lg-sec dl > div:last-child { border-bottom: 1px dashed rgba(26,22,18,0.18); }
    .lg-sec dt { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #c8542a; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
    .lg-sec dd { margin: 0; font-size: 16px; line-height: 1.6; color: #4a3f33; }
    .lg-sec-tail { margin-top: 22px !important; font-style: italic; color: #1a1612 !important; }

    .lg-foot-note { padding: 80px 56px 0; max-width: 1400px; margin: 32px auto 0; }
    .lg-foot-note-card { background: #ede5d6; border-radius: 18px; padding: 56px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .lg-foot-note-h { font-family: 'Instrument Serif', serif; font-size: 42px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 12px; }
    .lg-foot-note-h em { font-style: italic; color: #c8542a; }
    .lg-foot-note-p { font-size: 16px; line-height: 1.55; color: #4a3f33; margin: 0; }
    .lg-foot-actions { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
    .lg-foot-btn { font-size: 15px; padding: 14px 24px; background: #1a1612; color: #f4efe6; border-radius: 999px; transition: transform 0.2s, background 0.2s; }
    .lg-foot-btn:hover { transform: translateY(-2px); background: #c8542a; }
    .lg-foot-link { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6b5d4d; }
    .lg-foot-link a { color: #c8542a; }
    .lg-foot-link a:hover { text-decoration: underline; }

    @media (max-width: 1024px) {
      .lg-h1 { font-size: 84px; }
      .lg-body { grid-template-columns: 1fr; gap: 48px; padding: 24px 32px 0; }
      .lg-toc { position: static; padding: 24px 24px 28px; background: #ede5d6; border-radius: 14px; }
      .lg-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
      .lg-toc li:nth-child(2), .lg-toc li:nth-child(6) { border-top: 0; padding-top: 0; }
      .lg-content { max-width: 100%; }
      .lg-intro { font-size: 24px; margin-bottom: 48px; padding-bottom: 36px; }
      .lg-sec-h { font-size: 30px; }
      .lg-sec p { font-size: 16px; }
      .lg-foot-note { padding: 64px 32px 0; }
      .lg-foot-note-card { padding: 44px 36px; gap: 32px; grid-template-columns: 1fr; }
      .lg-foot-actions { align-items: flex-start; }
    }
    @media (max-width: 720px) {
      .lg-h1 { font-size: 52px; line-height: 0.96; margin: 0 0 24px; }
      .lg-h1 br { display: none; }
      .lg-meta { font-size: 11px; gap: 16px; flex-direction: column; }
      .lg-body { padding: 12px 20px 0; gap: 32px; }
      .lg-toc { padding: 20px 18px 22px; }
      .lg-toc ol { grid-template-columns: 1fr; }
      .lg-toc li { border-top: 1px dashed rgba(26,22,18,0.15) !important; padding: 8px 0 !important; }
      .lg-toc li:first-child { border-top: 0 !important; padding-top: 0 !important; }
      .lg-intro { font-size: 19px; margin-bottom: 36px; padding-bottom: 28px; }
      .lg-sec { padding: 0 0 40px; }
      .lg-sec-h { font-size: 24px; margin-bottom: 18px; }
      .lg-sec p { font-size: 15px; }
      .lg-sec dl > div { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
      .lg-sec dd { font-size: 15px; }
      .lg-foot-note { padding: 40px 20px 0; margin-top: 16px; }
      .lg-foot-note-card { padding: 32px 24px; border-radius: 14px; }
      .lg-foot-note-h { font-size: 28px; }
      .lg-foot-note-p { font-size: 15px; }
    }
  `;

  const otherKind = kind === 'privacy' ? 'terms' : 'privacy';
  const otherTitle = kind === 'privacy' ? 'Terms of Service' : 'Privacy Policy';
  const otherHref = kind === 'privacy' ? 'Leviyet Terms.html' : 'Leviyet Privacy.html';

  return (
    <>
      <window.WeNav active={kind} />
      <window.WeSEO page={kind} />
      <style>{css}</style>

      <section className="we-page-hero">
        <div className="we-shead"><div className="we-shead-line"></div>{doc.eyebrow}</div>
        <h1 className="lg-h1">{doc.title} <em>{doc.titleEm}</em></h1>
        <div className="lg-meta">
          <span>{doc.updated}</span>
          <span>·</span>
          <a href={otherHref}>Read the {otherTitle.toLowerCase()} →</a>
        </div>
      </section>

      <div className="lg-body">
        <aside className="lg-toc">
          <div className="lg-toc-h">// contents</div>
          <ol>
            {doc.sections.map(s => (
              <li key={s.n}>
                <span className="lg-toc-n">{s.n}</span>
                <a href={`#s${s.n}`}>{s.h}</a>
              </li>
            ))}
          </ol>
        </aside>

        <main className="lg-content">
          <p className="lg-intro">{doc.intro}</p>
          {doc.sections.map(s => (
            <section className="lg-sec" id={`s${s.n}`} key={s.n}>
              <div className="lg-sec-num"><span className="lg-sec-num-line"></span>section {s.n}</div>
              <h2 className="lg-sec-h">{s.h}</h2>
              {s.body.map((p, i) => <p key={i}>{p}</p>)}
              {s.list && (
                <dl>
                  {s.list.map(([t, d]) => (
                    <div key={t}><dt>{t}</dt><dd>{d}</dd></div>
                  ))}
                </dl>
              )}
              {s.tail && <p className="lg-sec-tail">{s.tail}</p>}
            </section>
          ))}
        </main>
      </div>

      <section className="lg-foot-note">
        <div className="lg-foot-note-card">
          <div>
            <h2 className="lg-foot-note-h">Plain language, <em>real people</em>.</h2>
            <p className="lg-foot-note-p">If anything here is unclear or feels off, write to us. We'd rather rewrite a paragraph than have you wonder.</p>
          </div>
          <div className="lg-foot-actions">
            <a href="mailto:hello@leviyet.com" className="lg-foot-btn">Email us →</a>
            <div className="lg-foot-link"><a href={otherHref}>Read {otherTitle.toLowerCase()} →</a></div>
          </div>
        </div>
      </section>

      <window.WeFooter />
    </>
  );
};

window.Legal = Legal;