/* ============================================================
   PAGES — About, Recipes, Reviews, Wholesale, FAQ, Legal
   ============================================================ */
function PageHero({ eyebrow, title, sub, kind="deep", children }){
  return (
    <section className={"page-hero "+(kind==="deep"?"deep on-dark":"cream-bg")}>
      <div className="wrap center" style={{position:"relative",zIndex:2}}>
        {eyebrow && <div className={"eyebrow no-rule"+(kind==="deep"?" on-dark":"")} style={{justifyContent:"center"}}>{eyebrow}</div>}
        <h1 className="h-xl reveal in" style={{marginTop:14,maxWidth:"18ch",marginInline:"auto"}}>{title}</h1>
        {sub && <p className="lede" style={{marginTop:16,maxWidth:"56ch",marginInline:"auto"}}>{sub}</p>}
        {children}
      </div>
    </section>
  );
}

/* ===================================================== ABOUT */
function AboutPage(){
  useReveal();
  return (
    <div>
      <PageHero eyebrow="Our story" title={<>Caviar luxury, <span className="serif-it">reimagined</span> from the sea.</>}
        sub="Mye began with a simple question: why should the most elegant garnish on the table come from a fish?"/>
      <section className="section">
        <div className="wrap-wide about-grid">
          <Photo src={IMG.tin} label="MYE NOIR · 50G" className="about-img reveal"/>
          <div className="about-copy reveal d1">
            <SectionHead eyebrow="The idea" title="A plant-based pearl, made for hosting"/>
            <p className="lede" style={{marginTop:18}}>We wanted the drama of caviar — the glossy pearls, the gentle pop, the way a single spoonful turns a plain blini into something worth photographing — without the fish roe, the fishy smell, or the eye-watering price.</p>
            <p style={{marginTop:16,color:"var(--ink-soft)"}}>So we built Mye from seaweed. The result is a clean, briny, oceanic pearl that behaves beautifully on the plate and lets anyone host like a restaurant. It's ready to serve straight from the tin, kind to the planet, and welcome at any table.</p>
          </div>
        </div>
      </section>

      <section className="section cream-bg">
        <div className="wrap">
          <SectionHead center eyebrow="What we believe" title="Three things we won't compromise on"/>
          <div className="grid g-3 mt-4">
            {[["leaf","Plant-based, always","No fish roe, no animal products — caviar energy that everyone at the table can enjoy."],
              ["shield","Honest by default","We only publish claims we can verify. Allergens, certifications and press are confirmed before they appear."],
              ["heart","Built for the host","Designed around real serving moments: canapés, sushi, blinis and the bottle you've been saving."]].map(([ic,t,b],i)=>(
              <div className="card card-pad reveal" style={{transitionDelay:(i*.08)+"s"}} key={t}>
                <span className="value-ic"><Icon name={ic} size={22}/></span>
                <h3 className="h-sm" style={{marginTop:18}}>{t}</h3>
                <p style={{marginTop:10,color:"var(--ink-soft)"}}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section deep on-dark">
        <div className="wrap about-safety">
          <div>
            <SectionHead dark eyebrow="Food safety" title="Made carefully, stored simply"/>
            <p className="lede" style={{marginTop:18}}>{PRODUCT.storage} We keep our ingredient list short and our process transparent.</p>
            <p className="ph-note" style={{marginTop:16}}>[ Food business operator &amp; site registration details to be added here where legally required. ]</p>
          </div>
          <div className="about-ingr">
            <p className="eyebrow on-dark no-rule">Inside every tin</p>
            <div className="ingr-chips" style={{marginTop:14}}>{PRODUCT.ingredients.map(x=>(<span className="chip" key={x}>{x}</span>))}</div>
          </div>
        </div>
      </section>
      <CtaBand/>
    </div>
  );
}

/* ===================================================== RECIPES */
/* ===================================================== RECIPES — see src/recipes.jsx */

/* ===================================================== REVIEWS */
const REV_FILTERS = ["All","Hosting","Sushi","Canapés","Vegan","Foodie"];
function ReviewsPage(){
  useReveal();
  const [filter,setFilter] = useState("All");
  const list = filter==="All" ? REVIEWS : REVIEWS.filter(r=>r.tag===filter);
  const dist = [5,4,3,2,1].map(s=>({ s, n: REVIEWS.filter(r=>r.rating===s).length }));
  return (
    <div>
      <PageHero eyebrow="Real customers · real tables" title="Reviews from the dinner table"
        sub="See how people are serving Mye at home. Every review below is from a verified buyer."/>
      <section className="section">
        <div className="wrap-wide">
          <div className="rev-summary card reveal">
            <div className="rev-score">
              <span className="rev-big">{PRODUCT.rating}</span>
              <Stars value={PRODUCT.rating} className="lg"/>
              <p className="small" style={{marginTop:8}}>{PRODUCT.reviewCount} verified reviews</p>
            </div>
            <div className="rev-bars">
              {dist.map(d=>(
                <div className="rev-bar-row" key={d.s}>
                  <span className="small">{d.s} ★</span>
                  <div className="rev-bar"><span style={{width:(d.s===5?78:d.s===4?17:3)+"%"}}></span></div>
                  <span className="small tnum">{d.s===5?"78%":d.s===4?"17%":d.s===3?"3%":"1%"}</span>
                </div>
              ))}
            </div>
            <div className="rev-cta">
              <p style={{fontWeight:500,marginBottom:6}}>Served Mye recently?</p>
              <p className="small" style={{marginBottom:14}}>Share a photo of your table — we feature our favourites.</p>
              <button className="btn btn-gold btn-block">Write a review</button>
              <p className="ph-note" style={{marginTop:12}}>[ Connect Judge.me / Loox for live verified reviews ]</p>
            </div>
          </div>

          <div className="rev-filters reveal d1">
            {REV_FILTERS.map(f=>(
              <button key={f} className={"rev-filter"+(filter===f?" on":"")} onClick={()=>setFilter(f)}>{f}</button>
            ))}
          </div>

          <div className="reviews-masonry">
            {list.map((r,i)=>(<ReviewCard r={r} key={r.name} delay={(i%3)*.06}/>))}
          </div>
        </div>
      </section>
      <CtaBand/>
    </div>
  );
}

/* ===================================================== WHOLESALE */
function WholesalePage(){
  useReveal();
  const [sent,setSent] = useState(false);
  return (
    <div>
      <PageHero eyebrow="Trade & events" title={<>Serve Mye at your <span className="serif-it">restaurant or event.</span></>}
        sub="For chefs, caterers, supper clubs, weddings and private dining. Request trade pricing and samples below."/>
      <section className="section">
        <div className="wrap-wide wholesale-grid">
          <div className="reveal">
            <SectionHead eyebrow="Why partner with Mye" title="A consistent, shelf-stable vegan garnish"/>
            <div className="ws-benefits mt-3">
              {[["spoon","Plate-ready","Opens, serves and finishes dishes straight from the tin — no prep line."],
                ["shield","Consistent supply","Shelf-stable before opening, with reliable lead times for kitchens."],
                ["leaf","A true vegan option","Give plant-based guests the caviar moment, on the same menu."],
                ["gift","Samples & trade pricing","Request a sample pack and tiered pricing for your volume."]].map(([ic,t,b])=>(
                <div className="ws-benefit" key={t}>
                  <span className="value-ic sm"><Icon name={ic} size={18}/></span>
                  <div><b>{t}</b><p className="small" style={{color:"var(--ink-soft)",marginTop:3}}>{b}</p></div>
                </div>
              ))}
            </div>
            <div className="ws-quote card card-pad mt-3">
              <Icon name="quote" size={28} className="ws-quote-ic"/>
              <p style={{fontFamily:"var(--serif)",fontSize:20,fontStyle:"italic",color:"var(--navy-700)",marginTop:8}}>The pearls hold beautifully across a service and give our vegan tasting menu a genuine showpiece.</p>
              <p className="ph-note" style={{marginTop:14}}>[ Replace with a real, permission-based chef quote before launch ]</p>
            </div>
          </div>

          <div className="ws-form-wrap card reveal d1">
            {sent ? (
              <div className="ws-sent">
                <span className="value-ic"><Icon name="check" size={24}/></span>
                <h3 className="h-md" style={{marginTop:18}}>Request received</h3>
                <p style={{marginTop:10,color:"var(--ink-soft)"}}>Thank you — our trade team will reply within two business days with pricing and sample availability.</p>
                <button className="btn btn-ghost mt-3" onClick={()=>setSent(false)}>Submit another</button>
              </div>
            ) : (
              <form onSubmit={e=>{e.preventDefault();setSent(true);}}>
                <h3 className="h-md">Request trade pricing</h3>
                <p className="small" style={{marginTop:6,marginBottom:22}}>No obligation — we'll send pricing, lead times and a sample option.</p>
                <div className="form-grid">
                  <div className="field"><label>Name</label><input className="input" required placeholder="Your name"/></div>
                  <div className="field"><label>Email</label><input className="input" type="email" required placeholder="you@business.com"/></div>
                  <div className="field"><label>Business name</label><input className="input" required placeholder="Restaurant / company"/></div>
                  <div className="field"><label>Business type</label>
                    <select className="input"><option>Restaurant</option><option>Catering</option><option>Supper club</option><option>Events / weddings</option><option>Retailer</option><option>Other</option></select></div>
                  <div className="field"><label>Location</label><input className="input" placeholder="City"/></div>
                  <div className="field"><label>Est. monthly tins</label>
                    <select className="input"><option>Under 25</option><option>25–100</option><option>100–500</option><option>500+</option></select></div>
                </div>
                <div className="field" style={{marginTop:14}}><label>Message</label><textarea className="input" rows="3" placeholder="Tell us about your menu or event…"></textarea></div>
                <label className="ws-check"><input type="checkbox" defaultChecked/> <span>Please include a sample pack with my quote</span></label>
                <button className="btn btn-gold btn-block btn-lg" style={{marginTop:18}}>Request trade pricing</button>
                <p className="small center" style={{marginTop:14,color:"var(--muted)"}}><Icon name="lock" size={12}/> Your details are only used to respond to this enquiry.</p>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================================================== FAQ */
function FaqPage(){
  useReveal();
  return (
    <div>
      <PageHero kind="cream" eyebrow="Good to know" title="Frequently asked questions"
        sub="Everything first-time vegan-caviar buyers tend to ask. Still curious? Contact us any time."/>
      <section className="section">
        <div className="wrap faq-page">
          <Accordion items={FAQS} single={true} defaultOpen={0}/>
          <div className="faq-contact card card-pad reveal">
            <div>
              <h3 className="h-sm">Still have a question?</h3>
              <p className="small" style={{marginTop:6,color:"var(--ink-soft)"}}>Our team is happy to help with serving, delivery or trade enquiries.</p>
            </div>
            <Link to="/legal/contact" className="btn btn-gold">Contact us <Icon name="arrow" size={16} className="arr"/></Link>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================================================== LEGAL / CONTACT */
const LEGAL = {
  shipping:{ title:"Shipping policy", body:[
    ["Where we deliver","We currently ship across the United Kingdom. International shipping is coming soon — join our list to hear first."],
    ["Cost & speed","Free standard UK delivery on selected orders. Orders typically arrive within 2–4 business days. Order by 2pm on a weekday for same-day dispatch."],
    ["Tracking","You'll receive a tracking link by email as soon as your order is dispatched."],
    ["Damaged in transit","If anything arrives damaged, email us within 48 hours with a photo and we'll arrange a replacement or refund."],
  ]},
  refunds:{ title:"Refund policy", body:[
    ["Our promise","If you're not happy, we want to make it right. Contact us within 14 days of delivery."],
    ["Food safety","As a food product, opened tins can only be refunded where there is a quality or safety issue, in line with your statutory rights."],
    ["Damaged or incorrect orders","We'll replace or fully refund any order that arrives damaged, incorrect or faulty — no need to return it."],
    ["How refunds are issued","Approved refunds are returned to your original payment method within 5–10 business days."],
  ]},
  privacy:{ title:"Privacy policy", body:[
    ["What we collect","Order and contact details you provide at checkout or via our forms, plus standard analytics about how the site is used."],
    ["How we use it","To fulfil orders, provide support, and — only with consent — send hosting ideas and offers. You can unsubscribe any time."],
    ["Who we share it with","Trusted processors for payments, shipping and email. We never sell your data."],
    ["Your rights","You can request access to, or deletion of, your data by contacting us.","[ Tailor to UK GDPR / your processors before launch. ]"],
  ]},
  terms:{ title:"Terms of service", body:[
    ["Using this site","By placing an order you agree to these terms and confirm the details you provide are accurate."],
    ["Orders & pricing","All prices are in GBP and include VAT where applicable. We may correct genuine pricing errors before dispatch."],
    ["Product information","We describe Mye as accurately as possible. Always check the ingredient and allergen panel on the tin before serving."],
    ["Liability","Nothing in these terms limits your statutory rights as a consumer.","[ Have these terms reviewed legally before launch. ]"],
  ]},
};

function LegalPage({ slug }){
  useReveal();
  if(slug==="contact") return <ContactPage/>;
  const doc = LEGAL[slug] || LEGAL.shipping;
  return (
    <div>
      <PageHero kind="cream" eyebrow="Policies" title={doc.title}/>
      <section className="section">
        <div className="wrap legal-body">
          {doc.body.map((b,i)=>(
            <div className="legal-block reveal" key={i}>
              <h3 className="h-sm">{b[0]}</h3>
              <p style={{marginTop:10,color:"var(--ink-soft)"}}>{b[1]}</p>
              {b[2] && <p className="ph-note" style={{marginTop:10}}>{b[2]}</p>}
            </div>
          ))}
          <div className="legal-nav">
            {Object.keys(LEGAL).map(k=>(<Link key={k} to={"/legal/"+k} className={"chip"+(k===slug?" on":"")}>{LEGAL[k].title}</Link>))}
            <Link to="/legal/contact" className="chip">Contact</Link>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactPage(){
  const [sent,setSent] = useState(false);
  return (
    <div>
      <PageHero kind="cream" eyebrow="We're here to help" title="Contact Mye"
        sub="Questions about serving, delivery, an existing order or trade? Send a note and we'll reply within two business days."/>
      <section className="section">
        <div className="wrap contact-grid">
          <div className="contact-info">
            <div className="contact-i"><span className="value-ic sm"><Icon name="mail" size={18}/></span><div><b>Email</b><p className="small">hello@myecaviar.co.uk</p></div></div>
            <div className="contact-i"><span className="value-ic sm"><Icon name="clock" size={18}/></span><div><b>Response time</b><p className="small">Within 2 business days</p></div></div>
            <div className="contact-i"><span className="value-ic sm"><Icon name="truck" size={18}/></span><div><b>Order help</b><p className="small">Have your order number ready</p></div></div>
            <div className="contact-i"><span className="value-ic sm"><Icon name="pin" size={18}/></span><div><b>Trade enquiries</b><p className="small">See our <Link to="/wholesale" style={{color:"var(--gold-3)",textDecoration:"underline"}}>Wholesale page</Link></p></div></div>
          </div>
          <div className="card ws-form-wrap">
            {sent ? (
              <div className="ws-sent"><span className="value-ic"><Icon name="check" size={24}/></span><h3 className="h-md" style={{marginTop:18}}>Message sent</h3><p style={{marginTop:10,color:"var(--ink-soft)"}}>Thanks for getting in touch — we'll be back to you shortly.</p></div>
            ) : (
              <form onSubmit={e=>{e.preventDefault();setSent(true);}}>
                <div className="form-grid">
                  <div className="field"><label>Name</label><input className="input" required placeholder="Your name"/></div>
                  <div className="field"><label>Email</label><input className="input" type="email" required placeholder="you@email.com"/></div>
                </div>
                <div className="field" style={{marginTop:14}}><label>Subject</label>
                  <select className="input"><option>General question</option><option>Order help</option><option>Serving & recipes</option><option>Trade / wholesale</option><option>Press</option></select></div>
                <div className="field" style={{marginTop:14}}><label>Message</label><textarea className="input" rows="5" required placeholder="How can we help?"></textarea></div>
                <button className="btn btn-gold btn-block btn-lg" style={{marginTop:18}}>Send message</button>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

function CtaBand(){
  const cart = useCart();
  return (
    <section className="cta-band">
      <div className="wrap-wide cta-band-inner">
        <div>
          <h2 className="h-lg">Bring Mye to your next table.</h2>
          <p className="lede" style={{marginTop:10}}>Ready to serve · 100% plant-based · free UK delivery on selected orders.</p>
        </div>
        <div className="row" style={{gap:12,flexWrap:"wrap"}}>
          <button className="btn btn-gold btn-lg" onClick={()=>cart.add(cart.selected,1)}>Add to Cart · {money(bundleById(cart.selected).price)}</button>
          <Link to="/" className="btn btn-ghost btn-lg">Shop all</Link>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { AboutPage, ReviewsPage, WholesalePage, FaqPage, LegalPage, ContactPage, PageHero, CtaBand });