'use client';

import React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import { ArrowRight, Calculator, TrendingUp } from 'lucide-react';

export const ReprintCalculatorTeaser: React.FC = () => {
    return (
        <section className="py-24 bg-white relative overflow-hidden">
            <div className="container mx-auto px-4 relative z-10">
                <div className="flex flex-col md:flex-row items-center justify-between gap-12 bg-white border border-[#e5edf5] rounded-lg p-8 md:p-12 lg:p-16" style={{boxShadow:'rgba(50,50,93,0.12) 0px 8px 20px -8px'}}>

                    <div className="flex-1 text-center md:text-left">
                        <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded border border-[rgba(83,58,253,0.15)] mb-5" style={{background:'oklch(0.94 0.02 270)',color:'#533afd',fontSize:11,fontWeight:500,letterSpacing:'0.06em',textTransform:'uppercase'}}>
                            <TrendingUp style={{width:12,height:12}} aria-hidden="true" />
                            <span>ROI Calculator</span>
                        </div>

                        <h2 style={{fontSize:'clamp(1.875rem,4vw,3rem)',fontWeight:700,lineHeight:1.1,color:'#061b31',marginBottom:'1.25rem',letterSpacing:'-0.02em'}}>
                            Are you burning budget on{' '}
                            <span style={{color:'#533afd'}}>Static Reprints?</span>
                        </h2>

                        <p style={{color:'#64748d',fontSize:'1.0625rem',lineHeight:1.6,maxWidth:'52ch',margin:'0 auto 2rem'}}>
                            Find out exactly how much you can save by switching to dynamic QR codes. Our calculator reveals your savings potential in seconds.
                        </p>

                        <Link href="/reprint-calculator">
                            <Button size="lg" className="h-14 px-8">
                                Calculate Savings <ArrowRight className="w-4 h-4 ml-2" aria-hidden="true" />
                            </Button>
                        </Link>
                    </div>

                    <div className="flex-shrink-0 w-full md:w-auto flex justify-center md:justify-end">
                        <div className="bg-white border border-[#e5edf5] rounded-lg p-7 w-full max-w-[260px] text-center" style={{boxShadow:'rgba(50,50,93,0.25) 0px 20px 40px -20px,rgba(0,0,0,0.08) 0px 10px 20px -10px'}}>
                            <div className="flex items-center justify-center mx-auto mb-4 text-[#533afd]" style={{width:44,height:44,background:'oklch(0.94 0.02 270)',borderRadius:6}}>
                                <Calculator style={{width:22,height:22}} aria-hidden="true" />
                            </div>
                            <h3 className="font-semibold text-[#061b31] mb-2" style={{fontSize:'0.9375rem'}}>Cost Analysis</h3>
                            <p className="text-[#64748d] leading-relaxed" style={{fontSize:'0.8125rem'}}>
                                Enter your print volume and update frequency to see your hidden costs.
                            </p>
                            <div className="mt-5 h-0.5 w-full bg-[#e5edf5] rounded-sm overflow-hidden">
                                <div className="h-full w-2/3 bg-[#533afd] rounded-sm" />
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    );
};
