// Resminos — main landing page

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "display": "grotesque",
  "accent": "#2A5BFF",
  "heroLayout": "centered",
  "headline": "a",
  "glass": 2,
  "background": "orb"
}/*EDITMODE-END*/;

// ─── Tool / stack tiles ───────────────────────────────────────────────
// Real brand logos. Files in assets/logos/; Stripe + RevenueCat drawn
// inline because the uploaded sources weren't usable.
const Tools = [
  { name: "Claude",      tint: "#D97757", logo: <img src="assets/logos/claude.svg" alt="" /> },
  { name: "FlutterFlow", tint: "#4B39EF", logo: <img src="assets/logos/flutterflow.svg" alt="" /> },
  { name: "Supabase",    tint: "#3ECF8E", logo: <img src="assets/logos/supabase.svg" alt="" /> },
  { name: "RevenueCat",  tint: "#F2545B", logo: <img src="assets/logos/revenuecat.svg" alt="" /> },
  { name: "n8n",         tint: "#EA4B71", logo: <img src="assets/logos/n8n.svg" alt="" /> },
  { name: "Vercel",      tint: "#000",    logo: <img src="assets/logos/vercel.svg" alt="" /> },
  { name: "Stripe",      tint: "#635BFF", logo: <img src="assets/logos/stripe.svg" alt="" /> },
  { name: "Next.js",     tint: "#000",    logo: <img src="assets/logos/nextjs.svg" alt="" /> },
];

function App() {
  const [lang, setLang, t] = useLang();
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTheme(tw); }, [tw]);

  return (
    <>
      <BackgroundLayer kind={tw.background} />
      <Nav lang={lang} setLang={setLang} t={t} page="home" />

      <Hero t={t} layout={tw.heroLayout} headline={tw.headline} lang={lang} />

      <WhatWeBuild t={t} />

      <HowItWorks t={t} />

      <Deliverables t={t} />

      <WhoItsFor t={t} />

      {/* To hide the "Recent work" section once deployed, comment out the line below. */}
      <Work t={t} />

      <Pricing t={t} />

      {/* <Testimonials t={t} /> */}

      <Stack t={t} />

      <FAQ t={t} />

      <ContactBlock t={t} />

      <Footer t={t} />

      <StickyContact lang={lang} t={t} />

      <TweaksPanel title="Resminos · Tweaks">
        <TweakSection label="Typography">
          <TweakRadio label="Headline font" value={tw.display}
                      options={[{value:"grotesque",label:"Grotesque"},{value:"serif",label:"Serif"}]}
                      onChange={(v) => setTweak("display", v)} />
        </TweakSection>
        <TweakSection label="Theme">
          <TweakRadio label="Mode" value={tw.theme} options={["light","dark"]}
                      onChange={(v) => setTweak("theme", v)} />
          <TweakColor label="Accent" value={tw.accent}
                      options={["#2A5BFF","#FF6B35","#7C3AED","#10B981","#111111"]}
                      onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection label="Hero">
          <TweakRadio label="Layout" value={tw.heroLayout}
                      options={[{value:"centered",label:"Centered"},{value:"split",label:"Split"}]}
                      onChange={(v) => setTweak("heroLayout", v)} />
          <TweakSelect label="Headline" value={tw.headline}
                       options={[
                         {value:"a", label:"Your app in 2 weeks. Or you don't pay."},
                         {value:"b", label:"Ship in 14 days. Risk-free."},
                         {value:"c", label:"No app in 2 weeks? No invoice."},
                       ]}
                       onChange={(v) => setTweak("headline", v)} />
        </TweakSection>
        <TweakSection label="Atmosphere">
          <TweakSlider label="Glass intensity" value={tw.glass} min={1} max={3} step={1} unit=""
                       onChange={(v) => setTweak("glass", v)} />
          <TweakRadio label="Background" value={tw.background}
                      options={[
                        {value:"orb", label:"Orb"},
                        {value:"grid", label:"Grid"},
                        {value:"gradient", label:"Gradient"},
                        {value:"noise", label:"Noise"},
                      ]}
                      onChange={(v) => setTweak("background", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// ─── Hero ──────────────────────────────────────────────────────────────
function Hero({ t, layout, headline, lang }) {
  const headlines = {
    a: t.hero.headline_a,
    b: t.hero.headline_b,
    c: t.hero.headline_c,
  };
  const h = headlines[headline] || headlines.a;

  const HeadlineEl = ({ parts }) => {
    if (parts.length === 4) {
      return (
        <h1 className="h1">
          {parts[0]}<em>{parts[1]}</em>{parts[2]}<em>{parts[3]}</em>
        </h1>
      );
    }
    return (
      <h1 className="h1">
        {parts[0]}<em>{parts[1]}</em>{parts[2]}
      </h1>
    );
  };

  const HeroText = () => (
    <div className="hero-enter" style={{display:"flex", flexDirection: layout==="centered" ? "column" : "column", alignItems: layout==="centered" ? "center" : "flex-start", gap: 28}}>
      <span className="eyebrow"><span className="dot"></span>{t.hero.eyebrow}</span>
      <HeadlineEl parts={h} />
      <p className="lead" style={{textAlign: layout==="centered" ? "center" : "left"}}>{t.hero.lead}</p>
      <div className="cta-row">
        <a className="btn-glow" href={SITE.calendly} target="_blank" rel="noreferrer">
          <I.zap /> <span>{t.hero.cta_primary}</span>
        </a>
        <a className="btn btn-ghost" href="#how">
          {t.hero.cta_secondary} <I.arrow />
        </a>
      </div>
      <ul className="guarantees">
        <li><I.check /> {t.hero.g1}</li>
        <li><I.check /> {t.hero.g2}</li>
        <li><I.check /> {t.hero.g3}</li>
      </ul>
      <p className="fit-note">{t.hero.fit_note}</p>
    </div>
  );

  return (
    <section className="hero">
      <div className="container">
        {layout === "centered" ? (
          <div className="hero-centered"><HeroText /></div>
        ) : (
          <div className="hero-split">
            <div className="hero-text"><HeroText /></div>
            <HeroVisual lang={lang} />
          </div>
        )}
      </div>
    </section>
  );
}

function HeroVisual({ lang }) {
  return (
    <div className="hero-mock">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center"}}>
        <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:".12em", textTransform:"uppercase", color:"var(--ink-3)"}}>
          {lang === "fr" ? "Sprint en cours" : "Sprint in progress"}
        </div>
        <div style={{display:"flex", gap:6}}>
          <i style={{width:8, height:8, borderRadius:"50%", background:"#16A34A"}}></i>
          <i style={{width:8, height:8, borderRadius:"50%", background:"#FACC15"}}></i>
          <i style={{width:8, height:8, borderRadius:"50%", background:"#EF4444"}}></i>
        </div>
      </div>
      <div style={{fontFamily:"var(--font-display)", fontWeight:600, fontSize:32, letterSpacing:"-.03em", lineHeight:1.05}}>
        {lang === "fr" ? "Jour 09 / 14" : "Day 09 / 14"}
      </div>
      <div style={{display:"flex", flexDirection:"column", gap:10}}>
        {[
          {l: lang==="fr"?"Discovery":"Discovery", v: 100, done: true},
          {l: lang==="fr"?"Design hi-fi":"Hi-fi design", v: 100, done: true},
          {l: lang==="fr"?"Auth & paiements":"Auth & payments", v: 100, done: true},
          {l: lang==="fr"?"Écrans principaux":"Core screens", v: 70, done: false},
          {l: lang==="fr"?"Déploiement":"Deployment", v: 0, done: false},
        ].map((row, i) => (
          <div key={i} style={{display:"flex", flexDirection:"column", gap:6}}>
            <div style={{display:"flex", justifyContent:"space-between", fontSize:13}}>
              <span style={{color: row.done ? "var(--ink-3)" : "var(--ink)", textDecoration: row.done ? "line-through" : "none"}}>{row.l}</span>
              <span style={{fontFamily:"var(--font-mono)", color:"var(--ink-3)", fontSize:11}}>{row.v}%</span>
            </div>
            <div style={{height:4, borderRadius:99, background:"rgba(20,19,26,.08)", overflow:"hidden"}}>
              <div style={{height:"100%", width:row.v+"%", background:"linear-gradient(90deg, var(--accent), #7C3AED)", borderRadius:99}}></div>
            </div>
          </div>
        ))}
      </div>
      <div style={{marginTop:"auto", padding:14, borderRadius:14, background:"var(--accent-soft)", border:"1px solid rgba(42,91,255,.18)", display:"flex", gap:10, alignItems:"flex-start"}}>
        <div style={{color:"var(--accent)", marginTop:2}}><I.spark /></div>
        <div style={{fontSize:13, color:"var(--ink-2)", lineHeight:1.4}}>
          {lang === "fr"
            ? "Livraison prévue : J. 14 — dans les temps."
            : "Estimated delivery: Day 14 — on track."}
        </div>
      </div>
    </div>
  );
}

// ─── What we build ────────────────────────────────────────────────────
function WhatWeBuild({ t }) {
  return (
    <section className="section" id="build">
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.build.kicker}</span>
          <h2 className="h2">{t.build.title}</h2>
          <p className="lead">{t.build.lead}</p>
        </div></Reveal>
        <Reveal stagger><div className="build-grid">
          {t.build.items.map((b, i) => (
            <div key={i} className="build-card glass">
              <span className="num">{String(i+1).padStart(2,"0")}</span>
              <h4>{b.t}</h4>
              <p>{b.d}</p>
            </div>
          ))}
        </div></Reveal>
      </div>
    </section>
  );
}

// ─── How it works ──────────────────────────────────────────────────────
function HowItWorks({ t }) {
  return (
    <section className="section" id="how">
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.how.kicker}</span>
          <h2 className="h2">{t.how.title}</h2>
          <p className="lead">{t.how.lead}</p>
        </div></Reveal>
        <Reveal stagger><div className="steps">
          {t.how.steps.map((s, i) => (
            <div key={i} className="step glass">
              <div className="step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div></Reveal>
      </div>
    </section>
  );
}

// ─── Deliverables ──────────────────────────────────────────────────────
function Deliverables({ t }) {
  const icons = [
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="4" width="16" height="12" rx="2"/><path d="M2 8h16M5 6h.01M7 6h.01M9 6h.01"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="10" cy="7" r="3"/><path d="M3 18c1.5-3 4-5 7-5s5.5 2 7 5"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="14" height="10" rx="2"/><path d="M3 9h14M6 12h2"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><ellipse cx="10" cy="4" rx="6" ry="2"/><path d="M4 4v6c0 1.1 2.7 2 6 2s6-.9 6-2V4M4 10v6c0 1.1 2.7 2 6 2s6-.9 6-2v-6"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M10 2v3M10 15v3M2 10h3M15 10h3M5 5l2 2M13 13l2 2M5 15l2-2M13 7l2-2"/><circle cx="10" cy="10" r="2.5"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="10" cy="10" r="7"/><path d="m7 10 2 2 4-4"/></svg>,
  ];
  return (
    <section className="section" id="deliverables" style={{paddingTop: 40}}>
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.deliverables.kicker}</span>
          <h2 className="h2">{t.deliverables.title}</h2>
          <p className="lead">{t.deliverables.lead}</p>
        </div></Reveal>
        <Reveal stagger><div className="deliverables">
          {t.deliverables.items.map((d, i) => (
            <div key={i} className="deliverable glass">
              <div className="icon">{icons[i]}</div>
              <h5>{d.t}</h5>
              <p>{d.d}</p>
            </div>
          ))}
        </div></Reveal>
      </div>
    </section>
  );
}

// ─── Who it's for ──────────────────────────────────────────────────────
function WhoItsFor({ t }) {
  const icons = [
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18"/></svg>,
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 7l8 5 8-5-8-5zM4 17l8 5 8-5M4 12l8 5 8-5"/></svg>,
  ];
  return (
    <section className="section" id="who">
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.who.kicker}</span>
          <h2 className="h2">{t.who.title}</h2>
        </div></Reveal>
        <Reveal stagger><div className="who-grid">
          {t.who.items.map((w, i) => (
            <div key={i} className="who-card glass">
              <div className="icon">{icons[i]}</div>
              <h4>{w.t}</h4>
              <p>{w.d}</p>
            </div>
          ))}
        </div></Reveal>
      </div>
    </section>
  );
}

// ─── Work / Cases ──────────────────────────────────────────────────────
function Work({ t }) {
  return (
    <section className="section" id="work">
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.work.kicker}</span>
          <h2 className="h2">{t.work.title}</h2>
          <p className="lead">{t.work.lead}</p>
        </div></Reveal>
        <Reveal stagger><div className="work-grid">
          {t.work.cards.map((c, i) => {
            const Tag = c.url ? "a" : "div";
            const props = c.url ? { href: c.url, target: "_blank", rel: "noopener noreferrer" } : {};
            return (
              <Tag key={i} className={`work-card c${i+1}`} {...props}>
                <div className="meta">{c.tag}</div>
                <h5>{c.t}{c.url && <span className="work-arrow" aria-hidden="true">↗</span>}</h5>
                <p>{c.d}</p>
              </Tag>
            );
          })}
        </div></Reveal>
      </div>
    </section>
  );
}

// ─── Pricing ───────────────────────────────────────────────────────────
function Pricing({ t }) {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.pricing.kicker}</span>
          <h2 className="h2">{t.pricing.title}</h2>
          <p className="lead">{t.pricing.lead}</p>
        </div></Reveal>
        <Reveal stagger><div className="pricing-wrap">
          <div className="price-card primary">
            <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:12}}>
              <span style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:".14em", textTransform:"uppercase", opacity:.85}}>
                {t.pricing.plan_name}
              </span>
              <span style={{padding:"4px 10px", borderRadius:999, background:"rgba(255,255,255,.18)", fontSize:12, fontWeight:500}}>
                {t.hero.eyebrow}
              </span>
            </div>
            <div className="price-tag">
              <span className="amount">{t.pricing.amount}</span>
              <span className="currency">{t.pricing.currency}</span>
              <span className="unit">· {t.pricing.unit}</span>
            </div>
            <ul className="price-features">
              {t.pricing.features.map((f, i) => (
                <li key={i}><span style={{color:"#fff", marginTop:1}}><I.check /></span><span>{f}</span></li>
              ))}
            </ul>
            <a href={SITE.calendly} target="_blank" rel="noreferrer" className="btn-glow" style={{"--glow-bg":"#fff", "--glow-fg":"var(--accent)", marginTop:"auto"}}>
              <I.zap /> <span>{t.pricing.cta}</span>
            </a>
            <p style={{margin:0, fontSize:12.5, color:"rgba(255,255,255,.72)", lineHeight:1.45, textAlign:"center"}}>
              {t.pricing.fit_note}
            </p>
          </div>
          <div className="price-meta glass">
            <div>
              <div className="kicker" style={{marginBottom:18}}>{t.pricing.kicker}</div>
              <div className="stat">
                <span className="v">{t.pricing.stat1_v}</span>
                <span className="k">{t.pricing.stat1_k}</span>
              </div>
            </div>
            <div className="price-divider"></div>
            <div className="stat">
              <span className="v">{t.pricing.stat2_v}</span>
              <span className="k">{t.pricing.stat2_k}</span>
            </div>
            <div className="price-divider"></div>
            <div className="stat">
              <span className="v">{t.pricing.stat3_v}</span>
              <span className="k">{t.pricing.stat3_k}</span>
            </div>
          </div>
        </div></Reveal>
      </div>
    </section>
  );
}

// ─── Testimonials ──────────────────────────────────────────────────────
function Testimonials({ t }) {
  return (
    <section className="section">
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.testimonials.kicker}</span>
          <h2 className="h2">{t.testimonials.title}</h2>
        </div></Reveal>
        <Reveal stagger><div className="testimonials">
          {t.testimonials.items.map((it, i) => (
            <div key={i} className="testimonial glass">
              <blockquote>"{it.q}"</blockquote>
              <div className="who">
                <div className="avatar">{it.n[0]}</div>
                <div>
                  <div className="name">{it.n}</div>
                  <div className="role">{it.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div></Reveal>
      </div>
    </section>
  );
}

// ─── Stack (with tool logos) ───────────────────────────────────────────
function Stack({ t }) {
  return (
    <section className="section" id="stack" style={{paddingTop:60, paddingBottom:60}}>
      <div className="container">
        <div className="section-head" style={{marginBottom:40}}>
          <span className="kicker">{t.stack.kicker}</span>
          <h2 className="h2" style={{fontSize:"clamp(28px,3.4vw,42px)"}}>{t.stack.title}</h2>
          <p className="lead">{t.stack.lead}</p>
        </div>
        <Reveal stagger><div className="tool-grid">
          {Tools.map((tool, i) => (
            <div key={i} className="tool-tile" data-brand={tool.name} style={{"--tile-tint": tool.tint}}>
              <div className="logo">{tool.logo}</div>
              <span className="name">{tool.name}</span>
            </div>
          ))}
        </div></Reveal>
      </div>
    </section>
  );
}

// ─── FAQ ───────────────────────────────────────────────────────────────
function FAQ({ t }) {
  return (
    <section className="section" id="faq">
      <div className="container">
        <Reveal><div className="section-head">
          <span className="kicker">{t.faq.kicker}</span>
          <h2 className="h2">{t.faq.title}</h2>
        </div></Reveal>
        <Reveal stagger><div className="faq">
          {t.faq.items.map((it, i) => (
            <div key={i} className="faq-item glass">
              <details open={i===0}>
                <summary>{it.q}</summary>
                <p>{it.a}</p>
              </details>
            </div>
          ))}
        </div></Reveal>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);